The Easiest Darn Image Swap You Could Ask For

2009-07-17T09:11:00.000-07:00

Eek, first blog post to the development community of the web! I figured I'd show something to beginner/intermediate level developers that I discovered and found quite useful, and am starting to use in pretty much every website project I develop.

Image swapping in menu's is one of the most commonly used practices in any website. It's pretty basic and is probably something we've all done 100 times. However I've noticed that when searching Google for "image swap", the results that come up are pretty old methods, or are just crazy javascript generating apps that will give you 20 lines of code to do a simple image swap effect.

Ever try it in Dreamweaver? Here's a small snippet of the nonsense generated for you:

That's just a part of it, and there's already 3 functions full of variables and for loops. There are easier ways, people! Here's how we do it:

We'll look at the example from my website. Here's my two "Resume" images from my navigation.

So instead of actually swapping the images with an onMouseOver event, what we do instead is combine the two images together on top of each other so we can use them as a background image:

So now in my source code, we create a div just big enough to display the top half of the image, and give that div a class where we use the image as a background image using the background-image attribute in CSS.

Here's the html:

And here's the CSS to go with it:

So now what we are going to do is create the effect that when a user rolls over this div, the background image is going to jump up into a new background position so we only see the bottom half of our background image instead of the top half. For this we just need two very small functions and one more CSS style for the .resumeLink hover style.

Here's the two functions:

And now add the two functions to your initial html code:
(formatted slightly different so it fits across this page)

What the functions are doing is forcing a class change on the div. In the image above of the functions you can see hoverOver appends "hover" to your class name. And then hoverOut removes the "hover" so it goes back to the original class name. So there's still one more thing to do which is to actually create the hover class in our CSS.

The hover class looks like this:

The hover class for .resumeLink is just one line of CSS that bumps our background image up 34 pixels (half the height of background image, and exactly the height of the part of the image I want to show for the swap effect).

A couple more things I want to mention, as you can see in the html source code, I've put the actual anchor tag on the #resume div itself. The #resume div is just to declare the size of the menu item. It's the two classes that are swapping and changing via the functions in our javascript file.

Also, if you get funky behavior such as the hover state flowing all the way across your site like in the image below, it's because the container div (#resume) needs to be floated left. Without the float attribute you'll see the image swapping if you're anywhere to the left or right of it instead of only when rolling directly over the image.

So there's you're super easy image swap. I recently worked on a site where you can see another example of this working (pstnet.com software page) where a background image of 4 rollover effects is used. Here's an example of the background image used:

So you can see by clicking on the link above and rolling over the horizontal arrow roadmap that the image above is changing it's background position between 4 different states, not just 2.

Questions or comments, please feel free to post or e-mail me directly!

-tw

tommywhoops

The Easiest Darn Image Swap You Could Ask For