09 November 2013

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)

Thaks for fulfilling my request! This was super easy and I was able to get it done! I am curious how you do it for image that you have side by side like your social media links. Any suggestions? Tks again!

I'm bookmarking this! My blog is kinda plane Jane right now since I'm new to the scene, but, I've been thinking of ways to spruce it up and whatnot... this is awesome. I love that you have screenshots... that helps a TON! You da man!

This is a cool guide, but CSS sprites are a lot more efficient for doing mouseovers. It only takes one request to load both images so you don't have that weird delay between the hover-over while the second image loads. They are, however, a little more (lot) difficult especially for bloggers who do not know how to manipulate CSS/HTML so I appreciate your tutorial for breaking it down so easily. :)

Thank you! I was looking for a tutorial on this and only found wayyy confusing ones. This was crystal clear. Gonna check out your other posts now :) Oh, if you do another tutorial, I'm dying to customize my "newer/older" posts arrows and also make a cooler share bar (using flare now).