advanced code snippet search

Posted By

jadedbat on 03/01/09


Tagged

css image jquery validate caption


Versions (?)

Who likes this?

5 people have marked this snippet as a favorite

benrudolph
dsntos
acristic
vali29
mmcachran


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

 / Published in: jQuery
 

URL: http://www.thatgrafix.com

Video Example

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

Expand | Embed | Plain Text 
  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>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: dricketts on March 30, 2010

I like what you have, now how would i set the output to a different location say

You need to login to post a comment.