Description:
This plugin allows you to view an image as you hover over a link (or any referenced element) to that image. In this example, I have an unordered list with the list item text wrapped in anchor tags linking to an image. Rather than having to click the link to view the image on a new screen, this plugin allows you to view a preview of the image as you hover your mouse over the anchor tag.
This can also be useful if you want to have thumbnail images that you hover over to see an enlarged version. You would create a thumbnail of the image and load it in the page with the <img> tag. Then wrap the image in an anchor tag and link to the full size version of the image.
See the comments in the script for further explanation.
Demo
The Code:
HTML
<ul>
<li><a href="images/pic1.png">Hover Your Mouse</a></li>
<li><a href="images/pic2.png">Over These Links</a></li>
<li><a href="images/pic3.png">To See An Image</a></li>
</ul>
CSS
<style type="text/css" media="screen">
#largeImage {position: absolute; padding: 10px; background: #e3e3e3; border: 1px solid #cfcfcf; -moz-border-radius: 5px;}
</style>
jQuery
<script type="text/javascript" charset="utf-8">
$(function() {
var offsetX = 20; // this offsets the image preview 20 pixels on the x axis from your mouse (these offsets help avoid the flicker bug!)
var offsetY = 10; // this offsets the image preview 10 pixels on the y axis from your mouse
$('a').hover(function(e) { // calls a function when the mouse hovers over a elements (could add a class if you only want certain a tags to have this functionality). The 'e' passes in 'event' to allow us to access the css parameters of pageY and pageX (maybe look for further explanation on this?)
// mouse on
var href = $(this).attr('href'); // creates a variable called href that accesses the hovered anchor tag href attribute value
$('<img id="largeImage" src="' + href + '" alt="image" />') // Here, we are creating the img tag with the image we want shown when we hover our mouse over the anchor tag. Note how the src=" is written (split up) in order to call the value of our variable href, or in other words, the path to our image.
.css('top', e.pageY + offsetY) // this absolutely positions the image on the page where your mouse is plus the offset of 20px so that your mouse is not over the image preview, thus taking it off the a, thus stopping the script and hiding the image, thus causing the flicker as your mouse goes in and out of being over the a.
.css('left', e.pageX + offsetX) // same as above
.appendTo('body'); // this just appends the img tag and code we just created to the body markup
}, function() {
// mouse off
$('#largeImage').remove(); // this removes the img with id="largeImage" that we created above when we stop hovering
});
$('a').mousemove(function(e) { // this 'mousemove' event keeps the image always offset 20 x 10 pixels from your mouse as you move your mouse over the link
$('#largeImage').css('top', e.pageY + offsetY).css('left', e.pageX + offsetX); // this is just showing that you can write this all on one line as opposed to separate lines as it was done above.
});
});
</script>
