Preview Link by Hovering to Display an Image using jQuery

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.


jQuery Code

Wrap this in a javascript tag.


	$("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>

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;

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Graveyard Database Logo

Has everything you want to know about grave yards. Plus has many celebrites and world leaders graves. Pssst it is my other site

Google + Profile
Check out Android Photo Mapping, its a app/site I been working on
Fabulou wholesale Petr Mrazek jersey is back. Best choice to get the wholesale Petr Mrazek jersey is suitable for all style of people.