Advanced Search

jQuery, CSS Image Rollover Captions - validates + video example + cross browser

/ Published in: jQuery
Save to your folder(s)
[Video Example](http://screencast.com/t/L6E0xI0J5P)

A cross browser image caption on mouseover. Using jquery, CSS. This is a bit crude but pretty simple to implement. Just change the image width, some css to match that image size and create dynamic id's for the divs holding the images for jQuery. Used cite for captions. This validates too :) [Video Example](http://screencast.com/t/L6E0xI0J5P)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  5. <title>Page Title</title>
  6. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function() {
  9.  
  10. 	$(".my_image").hover(function(){
  11.  
  12. 	  // grab the div's id	
  13. 	  var id = $(this).attr("id");
  14.  
  15. 	  // hide the caption	
  16. 	  $("#"+id+" .cite_pad").hide();
  17.  
  18. 	  // over
  19. 	  $("#"+id+" .cite_pad").slideDown("fast");
  20. 	},function(){
  21. 	  //out
  22. 	  var id = $(this).attr("id");
  23. 	  $("#"+id+" .cite_pad").slideUp("fast");
  24. 	});
  25. });
  26. </script>
  27. <style type="text/css">
  28.  
  29. .my_image {position:relative; width:484px; height:318px; background:#eee; border:solid 1px #ccc; margin:0px auto; padding:15px;}
  30. cite {height:25px; background:url('http://www.thatgrafix.com/caption_bg.png'); _background:#000; position:absolute; top:15px; left:15px; width:475px; font-family:verdana; font-style:normal; font-size:85%; color:#fff;}
  31. .cite_pad {padding:5px; display:none;}
  32.  
  33. </style>
  34. </head>
  35.  
  36. <body>
  37. <!-- items to edit: css: my_image width & height to match image size, the width for cite (to fit inside image) and increment div id's img_1, img_2, and finally the width of the image -->
  38. <div class="my_image" id="img_1">
  39. 	<img src="http://www.thatgrafix.com/caption_shot.jpg" width="485" alt="image" />
  40. 	<cite class="cite_pad"><strong>Beautiful Pond:</strong> This was taken outside our tent. 3-15-09</cite>
  41. </div>
  42. <br />
  43. <div class="my_image" id="img_2">
  44. 	<img src="http://www.thatgrafix.com/caption_shot.jpg" width="485" alt="image" />
  45. 	<cite class="cite_pad"><strong>The Same Pond:</strong> Yes this is the same image. 3-15-09</cite>
  46. </div>
  47.  
  48. </body>
  49. </html>

URL: http://www.thatgrafix.com

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.