Image Swapping

Recently with a project I am working on, I was using a technique known as image swapping. The gist can be seen here, if you roll your mouse over the buttons on the left (click here). Its a sweet technique that adds a simple, cool functionality to a site’s navigation. Here is how to do it:
First, we need to set up the javascript in between the HEAD tags. First, creating the function. It looks like this:

[quickcode:noclick]

[/quickcode]

I am not going to get into how everything is working. I would have to do a big javascript tutorial. Basically, you are setting up the function of what happens when the mouse rolls over a button, or when it comes off a button. Then, here is the where you assign the actual variables to the pictures you want to change:

[quickcode:noclick]

[/quickcode]

In the above code, a few things need to change to work on your site. First, for: image_off= new Image(470,167), this needs to be changed to the size of the image. Width, height. This should be changed anywhere you see those numbers in the above code, for each pic you are going to use. On my site the images are staying in the same spot, so the sizes are all the same. Also, anywhere it says images/…” this is the relative URL to the pic you want changed. Image2, Image3, Image4, are the 3 pics that I will rotate. So I first assign their width and height, and then the relative URL to where the image I want is. Before this will work, you have to give a title to the default image. Like this:

[quickcode:noclick]

[/quickcode]

Once that’s done and the javascript code set up, you need to now add the function into the links you want to use to cause the images to change. For example:

[quickcode:noclick]
Your Link
[/quickcode]

The above link will change the default pic above to the src you specify in image2.src above in the javascript. Sorry if this is a bit confusing. I don’t have enough time to get into how it all works. However, you can easily copy and paste the code and it will work for you.