I wanted to jazz up one of my sites that had a list links so that it would display a preview of the link.  I seen a great tutorial for this but I needed to hack it a little for it to work for me.  So I add an ‘name’ attribute to the <a> tag.  When the user mouse over the link it grabs the name attribute and concatenate with the image file extension  (.JPG). Then I followed the source code from the tutorial and replaced the image. Here is the code and demo.

DEMO

jQuery Code

Wrap this in a javascript tag.

$(document).ready(function(){

	$("h2").append('') // to add caption
	$(".left a").hover(function(){ // hover link

		var largePath = $(this).attr("name");   // grab name of link

                /** add the file extension to the name that was grabbed perviously **/
		$("#largeImg").attr({ src: "grave_preview/" + largePath + ".JPG" };
		$("h2 em").html(" (" + largePath + ")"); return false;  // add the caption.
	});
});

HTML code

<div class="left"><a class="thumbs" name="phil" href="Phillipi.php">Philippi - Georgia, Locust Grove</div>
<div class="left"><a class="thumbs" name="copper" href="copperHill.php"></a>Copper Basin - Tennessee, Copperhill</div>
<div class="left"><a class="thumbs" name="mckibben" href="McKibben.php"></a>Mckibben - Geogria, Locust Grove</div>

<p><img id="largeImg"  alt="Hover Over Link"  class="thumbs" src="grave_preview/phil.JPG" style="border: solid 1px #ccc; width: 400px; height: 300px; padding: 5px;"></p>
<h2></h2>

CSS code

#largeImg {
	border: solid 1px #ccc;
	width: 550px;
	height: 400px;
	padding: 5px;	
}

h2 em {
	font: normal 80%/100% Arial, Helvetica, sans-serif;
	color: #999999;
}

a:hover {
	color: #000000;
}