Image MouseOver Text Display jQuery Example

Image MouseOver Text Display jQuery Example:

image textover text display using jquery capty plugin

 

demo
download

A Single image is enough to say 100 words, but still sometime we may need to display something on image mouseover to explain few things better than only with image.

 

Inorder to achieve this, there are around 30 plus jquery plugins. Now we are going to achieve this with jQuery Capty Plugin.

 

jQuery Capty Image MouseOver Text display source code:

The text which need to be displayed on the image mouseover will be given in the “alt tag of the image”. And with the image id jQuery Capty plugin is called on document ready.

 

[html]

<html>
<head>
<title>
Image MouseOver Text Using jQuery Capty Plugin – Javadomain.in
</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.capty.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(‘#google_img’).capty();
});
</script>
</head>
<body>
<img id="google_img" src="img/google.jpg" alt="World’s No.1 Search Engine" width="300" height="200"/>
</body>
</html>

[/html]

 

 

Output:

 

Google Image:

image mouse over text display

On Mouse over of the google image we have displayed “World’s No.1 Search engine” text.

image mouse over text display

 

 

Recommended jQuery Books:

 

 

Download Source code:
Image MouseOver Text Display Source code download

Leave a Reply