Image MouseOver Text Display jQuery Example:
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:
On Mouse over of the google image we have displayed “World’s No.1 Search engine” text.
Recommended jQuery Books:
Download Source code:
Image MouseOver Text Display Source code download