Saturday Sessions: Rollover Image Effect

Have you seen on some blogs, when you hover your mouse over an image, then that image changes before your very eyes to a completely different image? That is what we are going to be learning today: rollover image effect. Thanks to Chelsee from Southern Beauty Guide for requesting this tutorial for today!

I also have a new Saturday Sessions rating system: 

1 meaning...

This tutorial is so easy you could have just started a blog yesterday and you think HTML is some sort of helicopter they use in the air force.

10 meaning...

WTF is this bitch talking about. 

-------

This Saturday Session: 6-7 on the tutorial scale! 

So you need two sets of images. You need one image that will be the image your reader sees when they open the blog, the next will be the image your reader sees when they hover their mouse over the picture.

Image One:

Image Two (rollover image):

STEP ONE:

Upload your two images to Photobucket, or any other image hosting site of your choosing.

STEP TWO:

Go to your blogger dashboard --> Layout --> Add a Gadget --> Add HTML

In that new HTML box, add the following code:

<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

Where it says URL ADDRESS:
Change that to the URL address you want your reader to go to when they click that image.

Where it says URL OF THE FIRST IMAGE GOES HERE
Paste the URL you copied from your first image in Photobucket...

Where it says URL OF THE SECOND IMAGE GOES HERE
Paste the URL you copied from your second image in Photobucket...

Where it says URL OF THE FIRST IMAGE GOES HERE 
Paste the URL you copied from the first image in Photobucket... (again)

So here is what my final code looks like in blogger:

Click save and voila! A mouse over / rollover image! 

As usual, please don't hesitate to ask any questions!