![All right. I've had it. The boob has gotta go. Any light fixture suggestions for me?? :]](http://photos-h.ak.fbcdn.net/hphotos-ak-ash2/hs016.ash2/34146_848381070441_7033998_46368819_6716386_s.jpg)
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.
tnx very much.
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
Thankx for the help! That was cool!
That was helpful, was looking for something like this.
Thanks a lot.. searching for this script for a while now..
That is about the cleanest and easiest script I have tried to adopt to using for my Home Theater movie GUI
Thanks kindly. :-)
Will this work with text too? As in mouseover the image and get some text?
thanx a lot guys!!!This is just perfect
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
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.
is there any way to do this with a link, that when the mouse is over displays a thumbnail?
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!
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
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
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
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?
Just wanted to say thanks. The script was helpful and easy to install.
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
Thank you SO much for sharing this. Just what I was looking for and it works a treat.
Cheers!
Graham
Thanks for your great help
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?
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
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
hey thanks for this complete information about the code it sure helped me allot to in my work!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
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..:)
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
I said “does use”, but meant “does NOT use the ajax…”
Thanks
That help me.