How to Add Popup Rollover Preview Images

I spend a lot of time browsing the internet looking for new or neat things to do with my site. Only about 1% of it makes it to the site, but this one was a must have. It is a roll over-pop up image. It basically works the same as a tool tip, but for images. I found the source here

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer

here is an example..

Why you need this:

It is a great way to fit lots of downloads on one page. One thing surfers hate doing is mucking through page after page of only 2 or 3 downloads (can you say Peggy?). You can cram lots of tiny preview pics on one page, while allowing viewers to see larger versions WITHOUT having to open a new page or navigating away from the downloads page. It will keep viewers at your site longer, and will keep their frustration levels lower!

The first step to all of this: get organized. If all your files are dumped into your main directory then you have some serious overhaulin' to do. But you will be so much happier in the long run if you get your act together and organize your images, files, and html in different places. I suggest making 2 sub folders in your main directory.

images

files

in your images folder make 2 more sub folders

thumb

full

so now your directory will look something like this

• /
• images
• thumb
• full
• banners
• files
  • clothing
  • houses
  • makeup
  • objects

Now I bet you're wondering.. WHY are you butting into my business?!?! Let me do it MY way! Well that's fine. But the reason you want to do all of this is not just to make it look pretty, it will also make your life a heck of a lot easier!

Now to get back to the juice. I find it easiest to have your thumbnail and enlarged image share the same name (ah ha! NOW you see why there are different folders!) The reason: I am lazy and copy/paste is my friend. If you have the same name for both images, you are not searching around for the names of both images. Obviously, if they have the same name, they can't be in the same folder because one would overwrite the other :P

Once you have your files ready, the rest is easy.

STEP 1. THE CSS

Right under the <title></title> tags paste this code (if you are using a wysiwyg editor, this is not the place that you would type words you want on the site or put images, there should be some way to find the code editor, you will have to consult your manual for that)

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: light yellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

</style>

STEP 2: THE HTML

Now, wherever you want your thumbnail image to appear, you will also have to paste this in the code section, or else it will just show up as the same mumbo jumbo you see here.

<a class="thumbnail" href="#thumb"><img src="thumb/image.jpg" border="0" /><span><img src="full/image.jpg" /><br /></span></a>

Replace the image.jpg with your image name and you're done!

For image organization, I separate each image into a separate cell of a table. You will have to play around with thumbnail size, find something that is small enough to make browsing your site pleasant, but large enough to not need to see with a microscope :) The nice thing about this code is that you can afford to make your thumbnails on the small side, since all the user has to do is roll over the image to see the large version.

STEP 3: TWEAKING

You can add comments to your full size image by typing in a <br/> (yes the / is on the wrong side) just before the second </span> tag (at the end). It will look something like this

<a class="thumbnail" href="#thumb"><img src="thumb/image.jpg" border="0" /><span><img src="full/image.jpg" /><br />WOWZERS!</span></a>

WOWZERS!
WOWZERS!

• You can change the background for the popup image by editing the CSS.

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow; <-- change this to a hexagonal number like #ff7a0e (white) or whatever you want
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

• You can change the position of the popup from relative-to-thumbnail to relative-to-page by editing the CSS

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative; <-- change this to position: absolute;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px; <--- This is now from the upper left hand corner of the window (or frame). Use a positive number or it will be off screen!
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;

}

 What does it all mean?

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: light yellow; <-- changes the color of the background behind the image
padding: 5px; <-- changes how much background you see
left: -1000px; <-- changes the position of the popup relative to the center of the thumbnail (smaller images will need smaller numbers)
border: 1px dashed gray; <-- changes the border around the background of the image
visibility: hidden; <--- keeps the image from popping up till after it has been rolled over
color: black; <-- color of the text
text-decoration: none; <-- stuff like font and style

There are other things you can do with this script, but that is all I have messed with :P

DOWNSIDE

1. This code does not render properly with IE 6 or lower. It shows up, but it does this sort of epileptic seizure thing with multiple images on one page >:{
2. This code eats a bit of bandwidth. Each time a page is loaded, it loads BOTH the thumbnail and full picture, even if the full picture is never 'requested'. So if you are using a free host or you don't have much bandwidth, you may want to pass.
3. If your enlarged pic loads over your thumbnails, you will have trouble with the mouseovers. Basically you have to move your mouse completely off the full pic in order to see the enlarged pic of the thumbnails that lay beneath it. I personally only have 2 rows of thumbnails for this very reason.
4. Doesn't work well on a page that is longer than the window (as you can see from this demo)

If you would like to see this script at work, take a look at any of the clothing pages on this site

http://www.doursim.com