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

Posted: May 15, 2012 in Web Designing

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

Read More http://www.kevinandamanda.com/whatsnew/javascript-tutorial-mouseover-an-image-thumbnail-to-get-a-pop-up-preview#ixzz1uvQzJ8oP

 

About these ads
Comments
  1. UR A THIEF says:

    Wow…you actually want credit and comments for steeling someone else’s work?

    • I never intended to hurt any one’s feeling. In this blog I have mentioned the source links in many post. Its nt lk that I want to show my self as knowledgeable n I hv created all this codes. I just found your article helpful n posted in mine so whenever in future I need to refer such type of code it will be easily available. I will surely mention that I am not writing the articles n contents its all the search results that I have got after spending hours on internet n posted to share what I found helpful. If your are thinking that I have done something wrong then I am ready to not only delete your article in my blog but I will inactive the entire blog account I have, coz people like you don’t like to understand wat you will get if someone share the knowledge that is available free…. If u think its so important piece of code then put it with password protected. I am really disappointed with ur attitude. My blog is only for sharing web updates among my group of friends what I found cool on internet. I would like to again apologize for taking article from your site. I will remove it at the earliest.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s