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.
$(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; }