Kevin & Amanda

Javascript Tutorial: Mouseover an image thumbnail to get a pop-up preview

What does it do?

When you hover your mouse over an image (thumbnail), another image (larger version) will popup. While the image is loading, a loading image status bar appears over the image.

See a live example here.

Download the code here.


How does it work?

First download the code using the link above. Find the style.css and mouseover-popup.js files and upload them to your webpage.

On every page that you want the images to popup, you will need to have these lines in the HEAD section of your code:

Right after the BODY tag, put this:

For every image you want to pop up, you will first need to have two images, a smaller thumbnail and the bigger image, and then you will need to put this code in your IMG tag:

The two numbers after the title (390,530) should be changed to the size of your big picture. Width,Height. Unfortunately you have to put the width and height in for every image and you can’t leave it out the popup will look wonky.

You can also put A HREF tags around any of the images to link to any image/page you want.

Something weird to note:

If you have some code that looks like this up at the top of your page:

It causes the loader bar to not work. I have no idea why. I don’t claim to know how to do all this stuff, this is just how I hacked it up enough to work for me. :D


Loader bar: If you want to take the loader bar out, open the style.css file and delete the lines it specifies in that file.

Title font: Edit the h2 tag in the style.css folder to change the image title font style.

Image border: Edit the border_preview tag in the style.css file to change/edit/remove the border on the large pic.

White border/padding: Play around with the padding tags in the style.css file to completely remove the image title / white border around the large pic.

An alternative:

For a different look, if you want to completely get rid of the loader bar, image title, and white border/padding around the large pic, you may like this alternative script from Christie Rosputni. She wrote this as an alternative to my code.

See Christie’s live example

Download Christie’s code