Javascript Switching Images
css Switching Images
css Shifting Image
Javascript Changing Visibility
Put your mouse over the images to see the effect
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.
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 check...it'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
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.
For simplicity, these depend on the image's ids, being the same as the key in the associate array.
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:
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:
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.
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.
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
to my css and added:
to my html, I could make the
Texas image work the same way. Take a bow, Texas.
This
method starts by portraying a blank image the same size as the two
shifting images inside an anonymous anchor.
The magic happens because we have an image that contains both of the
images we plan on portraying: 
one above the
other. Then we use a css incantation:
to display the blank image with a background the size of half the background image so that we only see the top half and
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.
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:
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.)
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
Otherwise we make file hidden and filealt visible.
This doesn't quite work the way we want it.
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:
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.
And voila! It works just the way we want it to.
Ta da!