Rollover Images in 4 Styles

(Back to web tutorials)

Lone Star Flag of Texas Javascript Switching Images

Rollover Me! css Switching Images

Rollover Me! css Shifting Image

messy filefile Javascript Changing Visibility

Put your mouse over the images to see the effect

The cool methods follow!

Javascript Switching Images

Lone Star Flag of Texas

In the first method, we put an image into a span, and set the span's onmouseover and on mouseout attributes to point to functions that will swap the images. To make it flow better, we preload the images when we load the document. Here's the steps: First, up in the <head> we preload the images as attributes of two anonymous objects. One holds the normally visible images (or image in this case since we're only do one image with this method), and the other holds the alternate images we want to show up when we hover.

<script type="text/javascript"> var onImg = {}; var offImg = {}; if (document.images){ onImg["texas"]=new Image(61,54); onImg["texas"].src="images/tx.gif"; offImg["texas"]=new Image(61,54); offImg["texas"].src="images/txhigh.gif"; }</script>

Note: placing code that swaps images inside if(document.images){} makes sure that you are using a modern enough browser so that you can swap images. Since thats IE4 or greater, Mac IE3 or greater,,, Netscape Navigator 3 or greater, all Mozilla based (including Firefox), all Chrome, and all Safari, you might feel safe leaving off the's up to you. In further examples we'll leave it off for brevitys sake.

The size of the new Images should match the size of the actual images. Then we set up the html

<span onmouseover="imageOff('texas');" onmouseout="imageOn('texas');" > <img id="texas" src="images/tx.gif" alt="Lone Star Flag of Texas" /> </span>

Then we'd better go back up and add the imageOn() and imageOff() functions back into our script section in the header. The two functions are identical, except that one loads from the onImage associative array, and the other loads from the offImg associative array.

function imageOn(imgName){ document.images[imgName].src=onImg[imgName].src; } function imageOff(imgName){ document.images[imgName].src=offImg[imgName].src; }

For simplicity, these depend on the image's ids, being the same as the key in the associate array.

css Switching Images

Rollover Me!

In the second method, my favorite, we load a transparent image inside an anchor, and use the css for the anchor to change the background of the image when we hover over the anchor. Make sure that the transparent image is as big as the backgrounds you want to show. Here's the html:

<a class="button" href=""> <img class="folder" src="images/buttonclear.gif" alt="Rollover Me!" /> </a>

We give the image a separate class, 'folder', so we can have all images in that class use the same backgrounds. Here's the css:

a.button img{ width: 56px; height: 48px; border: none; }

This says that every image inside of an anchor with class button, will have a width of 56 pixels, a height of 48 pixels, and no border.

a.button:hover img.folder { background-image: url("images/folder.png"); }

This says that if the image is of class folder, when we hover over the <a>, we should set it's background image to images/folder.png.

a.button img.folder { background-image: url("images/closedfolder.png"); }

And again, in that <a> of class button, an <img> of class folder should normally have a background of images/closedfolder.png. What happens is that the transparent image is a place holder for the backgrounds, and they get switched in and out as we hover over the <a>. The beauty of this is that you can have a series of icons that are all considered buttons, and be giving each different image type a different class you can switch their images appropriately. If I added

a.button:hover img.texas { background-image: url("images/tx.gif"); } a.button img.texas { background-image: url("images/txhigh.gif"); }

to my css and added:

<a class="button" href=""> <img class="texas" src="images/tx.gif" alt="Rollover Me!" /> </a>

to my html, I could make the Rollover Me! Texas image work the same way. Take a bow, Texas.

css Shifting Image

This Rollover Me! method starts by portraying a blank image the same size as the two shifting images inside an anonymous anchor.

<a class="manAnchor"> <img class="man" src="images/buttonclear.png" alt="Rollover Me!"/> </a>

The magic happens because we have an image that contains both of the images we plan on portraying: picture with 2 sprites one above the other of 2 men one above the other. Then we use a css incantation:

a.manAnchor img{ width: 61px; height: 54px; background-image: url("images/2men.png"); border: none; }

to display the blank image with a background the size of half the background image so that we only see the top half and

a.manAnchor:hover { background-position: 0 -54px; }

we use the pseudo class hover to shift the background position up be half the height of the image so we can see the other half. The advantage of this over the previous one is that browsers don't cache alternate backgrounds, so the previous method with two background images will pause for a bit the first time you rollover while the second image loads. With this method, the image is already loaded, so the pause isn't there.

Javascript Changing Visibility

messy file file

In the fourth method, we load both images inside the span, but preset their css so that one is visible with static positioning, and the other is hidden with absolute positioning. Then we set the span's onmouseover and onmouseout to both point to the same javascript function, to switch the images positioning and visibility. It will be clearer in a minute. First let me do it step by step. We'll start out with this html:

<span> <img id="file" src="images/messyfile.png" alt="messy file" /> <img id="filealt" src="images/file.png" alt="file" /> </span>
messy file file

This just puts them side by side. Then I add the imageSwitch() function in the script section. (This one is flawed, see if you can find the problem.)

function imageSwitch(imgName){ var myimage=document.getElementById(imgName); var myimagealt=document.getElementById(imgName+"alt");

First we get a handle on our two images, one is file, the other filealt.


If file is hidden, we make it visible and filealt hidden

} else {"hidden";"visible";

Otherwise we make file hidden and filealt visible.

} }

This doesn't quite work the way we want it.

messy file file

There's got to be another way. See, the problem is, that an element takes up space in the flow even if it's not visible. What we need is a way to take the hidden one out of the flow. Luckily for us, that's exactly what absolute positioning does. Here's the final css:

#file { visibility: visible; position: static; } #filealt { visibility: hidden; position: absolute; }

A static position is the normal default, just fit into the flow positioning, and position absolute lets you put anything anywhere. The hidden one actually ends up at the left side of the viewport, but you can't see it, so it's not annoying. Now we change our imageSwitch() function to make sure the hidden one always has absolute positioning and the visible one always has static positioning.

function imageSwitch(imgName){ var myimage=document.getElementById(imgName); var myimagealt=document.getElementById(imgName+"alt"); if(document.images[imgName].style.visibility=="hidden"){"visible";"static";"hidden";"absolute"; } else {"hidden";"absolute";"visible";"static"; } }

And voila! It works just the way we want it to.

messy file file

Ta da!

(Back to web tutorials)