January 7, 2009

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:

<link rel="stylesheet" href="style.css" type="text/css"> <script src="mouseover_popup.js" language="JavaScript" type="text/javascript"></script>

Right after the BODY tag, put this:

<div style="display: none; position: absolute; z-index: 110; left: 400; top: 100; width: 15; height: 15" id="preview_div"></div>

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:

<img src="smallpic.jpg" border="0" onmouseover="showtrail('largepic.jpg', 'Title of the Picture Goes Here',390,530)" onmouseout="hidetrail()">

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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

Customization:

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

Share:
Filed Under:

42 Comments

1 camc January 10, 2009 at 4:53 am

tnx very much.

2 Allison January 27, 2009 at 7:46 pm

Hey Amanda! I first want to say that you are so inspiring — I want to be you when I grow up!

Onto my real question — do you re-size each picture manually or do you have an auto-resizer of some sort? A typical photo album on my website contains 50-100 images and the re-sizing seems really tedious but I love this design. Let me know! I’d love to hear from you!

–Allison

3 Robin March 6, 2009 at 11:35 am

Thankx for the help! That was cool!

4 Daniel March 11, 2009 at 6:11 am

That was helpful, was looking for something like this.

5 BloggerTricks.com March 19, 2009 at 6:31 am

Thanks a lot.. searching for this script for a while now..

6 Robert March 25, 2009 at 9:20 am

That is about the cleanest and easiest script I have tried to adopt to using for my Home Theater movie GUI

Thanks kindly. :-)

7 Jason March 25, 2009 at 3:36 pm

Will this work with text too? As in mouseover the image and get some text?

8 Paolo April 2, 2009 at 6:44 pm

thanx a lot guys!!!This is just perfect

9 Runey April 27, 2009 at 5:53 am

I was searching for something like this but instead of displaying an image i wanted a little video preview to pop up. So i figured i’d try making it work with an animated gif but that doesnt work. :( So for anyone who wanted to try that save yourself some time. But great code nonetheless! thanks

10 JeffBoyardee May 17, 2009 at 12:15 am

Hello,

Thanks for the information on this. It’s really what I was looking for. It actually eluded me for a little while but I finally understood how to set it up in terms of file locations in relation to the page, etc.

I added some code I found elsewhere on the net so a pop up box will appear the size of the image in the center of the screen when you click on the image.

I’m on a Mac and it works great in Safari (although I don’t use it much). I use Firefox and it generally works there, but sometimes the mouseover doesn’t appear. If I restart Firefox the mouseover will work again, so I think it’s odd that something happens where Firefox doesn’t recognize the mouseover but the on click command always works as intended.

I asked a friend to test in IE and Firefor on a PC and mouseover didn’t work in either case – even after restarting Firefox. The pages on your site also did not work when my friend moused over your computer clutter images, which makes me think my code MAY be fine, but still doesn’t explain why it might work intermittently on my Mac in Firefox.

Any ideas? The site is http://www.palmsnightclub.com

Thanks for whatever feedback you can provide.

11 Question May 27, 2009 at 7:27 am

is there any way to do this with a link, that when the mouse is over displays a thumbnail?

12 John June 15, 2009 at 11:50 pm

Super stuff. Best explination of this that I’ve found so far. Got me up and running in under 5 mins!

Runey – have a go using a flv version of your movie. I’ve seen it done on VideoCopilot (http://www.videocopilot.net/tutorials/ancient_titles/)

Thanks again!

13 Vaskar Ghimire June 16, 2009 at 11:10 pm

Hello,

First up all thank you very very much for describing and providing this great script which I am searching.

I have one question please help me to solve this:

Is larger images size should be same or not?
I am in difficult, if size of images are different then popup images size zig zac.. from images to images

Please try to help me.

Thank You
Vaskar

14 Mauro June 30, 2009 at 9:33 am

Hi, nice script, but like Runey i would need something working with FLV files instead just jpg.
I took a look at the javascript but…no way to change what is needed to accept such a file type.

Any suggestion???

thanks

15 Sarunas July 22, 2009 at 1:38 pm

First off that’s the most user friendly script I have found on this topic so thank you very much for that, but like some of the others, I’m trying to get it to work so that it will play flv as well.

Any help would be appreciated

Thanks

16 Stephen August 2, 2009 at 3:48 am

Thank you for the code, but I can’t get the example to work. I uploaded everything to my server, does anybody knows why it isn’t working?

17 Chris August 7, 2009 at 7:48 am

Just wanted to say thanks. The script was helpful and easy to install.

18 venki August 19, 2009 at 12:48 am

hi dude..
You are the man.After a long search i came and landed at right spot here.
Good work dude. Thanks for giving.

Regards
Venki

19 Graham August 20, 2009 at 6:03 pm

Thank you SO much for sharing this. Just what I was looking for and it works a treat.

Cheers!
Graham

20 HABEEB September 10, 2009 at 10:35 pm

Thanks for your great help

21 Jason September 30, 2009 at 7:40 pm

I tried using this on a PHP page that generated search results of an image database. The code only seems to work when a single image is returned. When the results have more than one image, it doesn’t work. But on your example, you had multiple pictures on a single page. Is there anything different that needs to be done?

22 Michelle November 19, 2009 at 8:28 am

Very Very useful and simple. Perfect. Great work. Thanks a lot for help

My Question: Is it possible to make also some text below in this sample? Something like Image description. Any help will be appreciate

Answer for Stephan: U didnt notice what exactly is not working. U have to check files location, as well as your Large picture should have full location http://www…….. It was works for me

23 sasi December 15, 2009 at 6:08 am

hi,
its really helpful, thanks

QUESTION:
IS IT POSSIBLE TO POP UP A LARGER IMAGE FROM A PART SMALLER IMAGE(PART-for example i want to diplay the larger image of the man only when i move my cursor to his not on any other area)
PLS REPLY ME

24 Sushant December 29, 2009 at 1:04 am

hey thanks for this complete information about the code it sure helped me allot to in my work!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

25 Robert June 8, 2010 at 4:21 am

Hello!

I have use your great code to implement in my webpage, but i found a bug in jour javascript code…. (mouseover_popup.js)

for example…if i have a picture name that include charachter & or ‘ then big picture popup does not show.

Example: picture name: She’s Out of My League <- big picture popup preview will NOT show

if you use for picture name: Shes Out of My League <-then it will show…could you fix that problem?

many thanks..:)

26 Nobody else June 20, 2010 at 12:36 am

Very cool script. I used Christie’s hack, and found that it came with a lot of extra baggage (does use the ajax, the css, or the preview_div), and was missing some things that should have been there (for example, the /img/s.gif). It also had a couple of bugs and oddities in the code (for example, the function that fires on mouse out is missing the +”px” for the left and top positions). BUT, it works (with a little tweaking), and it is very lightweight and easy to get working. Since I am dealing with relatively small images, I trimmed down the code quite a bit by disabling the code that compensates for the full-size image going off screen. The bonus with that is I don’t have to care one bit about the dimensions of the full-size image, which makes it nice for dynamically populating a whole page full of thumbnails. Very nice script. Thank you

27 Nobody else June 20, 2010 at 12:37 am: I said “does use”, but meant “does NOT use the ajax…”

28 ahmad July 7, 2010 at 3:52 pm

Thanks
That help me.

29 BGRider444 November 5, 2010 at 7:56 pm

Hello,
I’m using that code and everything looks great on IE, Firefox, Netscape expect in Opera, Google Chrome, and Safari. The problem is in the position of pop up images. All popup images stay exactly in the same position of the web page. If I scroll down the page, the image stays way above hidden. Is there a solution for this problem?

30 Debasis Paramanik December 28, 2010 at 4:24 am

cool script

31 Sarah March 4, 2011 at 1:17 pm

I searched all over the place to find a straight-forward explanation for this technique. Thank you so much for sharing! Like others said, I’d love to know how to tweak it to play an flv video file instead of showing a static image though.

32 manuel March 27, 2011 at 5:10 pm

hi!, great script, but what is the license about this script?

33 Tim June 23, 2011 at 5:08 pm

Doesn’t seem to work on IE 9.

34 Kevin November 22, 2011 at 5:54 am: Has anybody found a way to get this working in IE 9 yet?

Thanks.

35 tony July 24, 2011 at 10:59 am

can I pre load the images so they load with the page my files are small.
Thank you
Tony

36 Matheus July 27, 2011 at 4:21 pm

how do I put this plugin in Wordpress?

37 OpalCat August 20, 2011 at 12:36 pm

I am trying to get this to work in Textpattern and I’m not having much success… could you email me and maybe tell me where I’m going wrong if I show you the test page?

38 imran solanki December 30, 2011 at 12:52 am

Thank’s ..!!!

39 Scott January 27, 2012 at 12:58 pm

I am also having issues getting this to work on the latest version of Internet Explorer & Google Chrome. Works perfectly in the latest Mozilla Firefox though. Good code though and thanks for sharing it!

40 eso0o January 31, 2012 at 3:00 am

hi guys,
thanks very much on this effort ,i tried it & it was great but the problem that the size of my picture doesn’t increase when i give it w & h & i don’t know why ,please can u tell me why ??????

41 Chien February 1, 2012 at 11:28 am