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



See More Posts About:

72 Comments






1
camc January 10, 2009 at 4:53 am

tnx very much.

Reply

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

Reply

3
Robin March 6, 2009 at 11:35 am

Thankx for the help! That was cool!

Reply

4
Daniel March 11, 2009 at 6:11 am

That was helpful, was looking for something like this.

Reply

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

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

Reply

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. :-)

Reply

7
Jason March 25, 2009 at 3:36 pm

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

Reply

8
Paolo April 2, 2009 at 6:44 pm

thanx a lot guys!!!This is just perfect

Reply

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

Reply

10
Reza Owji August 19, 2013 at 11:44 pm

in .js file there is a tag. put tag instead of that.

replace :
newHTML = newHTML + ”;

instead of:
newHTML = newHTML + ”;

11
Reza Owji August 19, 2013 at 11:46 pm

in .js file there is an img tag. put video tag instead of that.

12
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.

Reply

13
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?

Reply

14
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!

Reply

15
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

Reply

16
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

Reply

17
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

Reply

18
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?

Reply

19
Chris August 7, 2009 at 7:48 am

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

Reply

20
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

Reply

21
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

Reply

22
HABEEB September 10, 2009 at 10:35 pm

Thanks for your great help

Reply

23
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?

Reply

24
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

Reply

25
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

Reply

26
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!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Reply

27
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..:)

Reply

28
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

Reply

29
Nobody else June 20, 2010 at 12:37 am

I said “does use”, but meant “does NOT use the ajax…”

30
ahmad July 7, 2010 at 3:52 pm

Thanks
That help me.

Reply

31
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?

Reply

32
varun March 8, 2012 at 10:31 am

i m facing same prob with google chrome did u find ne solution

33
tyler June 7, 2013 at 3:52 pm

hey bigrider=
did you ever find a solution to the mouseover popup in the same place issue on Chrome?
if you did not – did you find a different set of code that does work?
thanks
tyler

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

cool script

Reply

35
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.

Reply

36
manuel March 27, 2011 at 5:10 pm

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

Reply

37
Tim June 23, 2011 at 5:08 pm

Doesn’t seem to work on IE 9.

Reply

38
Kevin November 22, 2011 at 5:54 am

Has anybody found a way to get this working in IE 9 yet?

Thanks.

39
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

Reply

40
Matheus July 27, 2011 at 4:21 pm

how do I put this plugin in Wordpress?

Reply

41
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?

Reply

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

Thank’s ..!!!

Reply

43
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!

Reply

44
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 ??????

Reply

45
Chien February 1, 2012 at 11:28 am

Thanks for the example. it works great.

Reply

46
Kipper February 9, 2012 at 4:03 pm

Great Script! Adds a nice touch to a website. thanks for sharing :)

Reply

47
ariia February 16, 2012 at 10:53 pm

thank’s, your code works like a charm

Reply

48
varun March 8, 2012 at 10:27 am

i m facing problem on google chrome all the images showing on same place please help me how to reconfigure in google chrome thank you

Reply

49
Ambiorix April 7, 2012 at 9:01 pm

Great Code!

Reply

50
Mauricio Orejuela April 20, 2012 at 7:25 pm

I was having issues with DOCTYPE at top of the page, and came up with a solution. Firefox and IE behave differently according with that DOCTYPE, so this is my life saver as follows:

first IF evaluates only if browser is IE
second IF evaluates only if browser is NOT IE (that includes both FF and Chrome)

<!–

<!–

Reply

51
Mauricio Orejuela April 20, 2012 at 7:33 pm

My tags didn’t show up, what do I need to do in order to have’em displayed for others to see’em ?

Reply

52
Jaro May 6, 2012 at 5:12 am

hi mauricio…i have same problem.. can you send me this code to my mail ? … bohanic.web ( a t ) gmail.com … thanks

53
Laura May 15, 2012 at 2:23 pm

Hi, I don’t know if you are already aware of this but there is some “blogger” running and stealing good quality articles like yours – I found your site because the article he stole from me pinged back to let me know (I just happened to have a link to another article of mine within the body text). I happened to have a quick nosy and seen that it looks like he has copied your post word for word – just like he did with mine. I’ve just written to him and given him the chance to remove it but was hoping that if a few of us get on to him we can stop him from stealing content and passing it off as his own.

Your article on his site: http://creativeindividual.co.uk/2011/02/create-a-pop-up-div-in-jquery/

All the best,
Laura

Reply

54
Laura May 15, 2012 at 2:24 pm
55
Steven October 17, 2012 at 2:26 pm

Hello,

Awesome article, I am trying the same thing on my website, I have the US map, and on a particular area(s) when someone mouseover, I want it to pop up a picture, and make it clickable on the US map, but there is going to be multiple mouseovers on the US map, how can I accomplish this?

thanks in advance

Reply

56
Eloise Coetzee May 17, 2013 at 1:51 am

Hi there. Thanks so much for the code, it works wonderfully! I am battling to get the popups to stay relative to the parent image though and once the page has been scrolled down, the popup isn’t visible any longer. Do you have any recommendations for me?
Kind Regards
Eloise

Reply

57
tyler June 7, 2013 at 3:53 pm

hi eloise-
did you ever find a solution to the mouseover popup relative position problem?
thanks
tyler

58
Eric June 25, 2013 at 1:39 pm

Doesn’t seem that these work properly in Safari or Chrome…

Reply

59
Sheldon July 26, 2013 at 6:16 pm

I am experiencing some issues with running on IE9 as some others have. It works fine with Chrome, Firefox, and Safari when test it, but not IE. Interesting though, when I run the examples on this site under IE9 it seems to work fine, but not when I create my own page from my editor, even when I copy it over to my PC. Has anyone found a solution to the mystery?

Reply

60
Gunaseelan July 27, 2013 at 11:09 am

Hi, I am newbie to web development. I am working in Wordpress. I need a help. Mouseover popup over a button. I have a php file which consist of html form. I have a button in the form. While we do a mouseover the button, An image should open in a popup window. You have done a fantastic js. But need some help to overcome my issue.

Reply

61
Tom August 20, 2013 at 8:17 am

Great script and great instructions.
Followed instructions and everything worked on my test site, locahost on my hard drive, with all major browsers. However, I can not get it to work under any browser when the files and page are uploaded to my online server! styles.css is in root directory, js script along with webpage is a subdirectory.

Any thoughts on what may be stopping it working?

Reply

62
mavricar September 3, 2013 at 5:20 pm

awesome script very huge thumbs up from me.

I have used something similar on one of the websites i have that are still in development and might i suggest that you preload the larger images asynchronously on page load. this will make the larger images appear instantly and you wont have the annoying loading times for slower browsers. if you would my prototype asynch loader flick me and email and ill get it to you.

Reply

63
Ngawang September 19, 2013 at 3:03 am

hello , I want larger image should be auto width and auto height when hovering in smaller image . so please help me out………

Reply

64
Yasir Imran September 25, 2013 at 4:58 am

Didn’t work with me, probably too many other scripts in my page & it is clashing.

Reply

65
Deepak October 8, 2013 at 1:45 pm

Great stuff man .. you made my day. It took just 20 minutes to integrate this in my prototype. I am backend engineer, and this kind of blogs make me demo hacks soon.

Reply

66
X October 20, 2013 at 6:47 pm

Thank you.

Reply

67
Pam December 11, 2013 at 4:47 pm

Thanks for the script but I need to edit it to work with an image map. Is that possible?

Reply

68
Amanda December 11, 2013 at 5:04 pm
69
Jeffrey Chen March 1, 2014 at 2:58 am

Thanks very much!

Reply

70
Nathan Nisbet June 10, 2014 at 6:06 am

hi there. thank you very much for this helpful post! However, how would I get the large image to appear in a fixed position on the page instead of where the mouse is?

Reply

Leave a Comment