Advanced Search

Return to Snippet

Revision: 12089
at March 1, 2009 23:57 by jadedbat
Initial Code 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Page Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	
	$(".my_image").hover(function(){
	
	  // grab the div's id	
	  var id = $(this).attr("id");
	
	  // hide the caption	
	  $("#"+id+" .cite_pad").hide();
	
	  // over
	  $("#"+id+" .cite_pad").slideDown("fast");
	},function(){
	  //out
	  var id = $(this).attr("id");
	  $("#"+id+" .cite_pad").slideUp("fast");
	});
});
</script>
<style type="text/css">

.my_image {position:relative; width:484px; height:318px; background:#eee; border:solid 1px #ccc; margin:0px auto; padding:15px;}
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;}
.cite_pad {padding:5px; display:none;}

</style>
</head>

<body>
<!-- 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 -->
<div class="my_image" id="img_1">
	<img src="http://www.thatgrafix.com/caption_shot.jpg" width="485" alt="image" />
	<cite class="cite_pad"><strong>Beautiful Pond:</strong> This was taken outside our tent. 3-15-09</cite>
</div>
<br />
<div class="my_image" id="img_2">
	<img src="http://www.thatgrafix.com/caption_shot.jpg" width="485" alt="image" />
	<cite class="cite_pad"><strong>The Same Pond:</strong> Yes this is the same image. 3-15-09</cite>
</div>

</body>
</html>
Initial URL 
http://www.thatgrafix.com
Initial Description 
[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)
Initial Title 
jQuery, CSS Image Rollover Captions - validates + video example + cross browser
Initial Tags 
css, image, jquery
Initial Language 
jQuery