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...
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:
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!
Ah I wish I'd found this a few days ago! As driving me crazy doing this for a design client and your way is far simpler! Bookmarking! Thanks for sharing :-).
ReplyDeleteKate | Diaries of an Essex Girl
This is great! Definitely going to try this :)
ReplyDeleteThaks 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!
ReplyDeleteOMG.....thanks so much for this tutorial Sarah.....I'm definitely trying this. :)
ReplyDeleteI'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!
ReplyDeleteThis is a great tutorial, thank you!
ReplyDeletexx
Kelly
Sparkles and Shoes
This is awesome! I need to save this for later. Thanks for posting!
ReplyDeleteI've been wondering about how to do this. Bookmarking this and thanks!
ReplyDeleteBlog Hug Nina Joy
Great tutorial! I use Wordpress but I'm sure the process is similar, hopefully. Love your blog!
ReplyDeletexx
Rakhi
This might be a 9 for me in terms of hardness, but I really really wanna try this out!!
ReplyDeleteYou're a freaking genius! I think I have a Saturday Sessions question to email you too! :)
ReplyDeleteWhy am I so lazy because I'd really like to do this right now.
ReplyDeleteLove this! But how do you get the images to sit next to each other? Meaning I want my social media icons next to each other, not one on top of another. Thank you!
ReplyDeleteYour tutorials are seriously the best! I had no idea what I was doing, and I learned soooo much from you! Thank you so much!
ReplyDeleteThis 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. :)
ReplyDeleteThank 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).
ReplyDeleteI have one for customizing newer/older post arrows! Here ya go! http://www.venustrappedinmars.com/2013/05/saturday-sessions_18.html
DeleteOMG! You ARE the best!!
Delete