Venus Trapped in Mars

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)






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! 


TWITTER FACEBOOK Pinterest Instagram Image Map

19 comments :

  1. 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 :-).

    Kate | Diaries of an Essex Girl

    ReplyDelete
  2. This is great! Definitely going to try this :)

    ReplyDelete
  3. 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!

    ReplyDelete
  4. OMG.....thanks so much for this tutorial Sarah.....I'm definitely trying this. :)

    ReplyDelete
  5. 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!

    ReplyDelete
  6. This is awesome! I need to save this for later. Thanks for posting!

    ReplyDelete
  7. I've been wondering about how to do this. Bookmarking this and thanks!
    Blog Hug Nina Joy

    ReplyDelete
  8. Great tutorial! I use Wordpress but I'm sure the process is similar, hopefully. Love your blog!

    xx
    Rakhi

    ReplyDelete
  9. This might be a 9 for me in terms of hardness, but I really really wanna try this out!!

    ReplyDelete
  10. You're a freaking genius! I think I have a Saturday Sessions question to email you too! :)

    ReplyDelete
  11. Good one to explain this one is so fun once you have it mastered but before that its a pain in the ass.

    ReplyDelete
  12. Why am I so lazy because I'd really like to do this right now.

    ReplyDelete
  13. Love 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!

    ReplyDelete
  14. Your tutorials are seriously the best! I had no idea what I was doing, and I learned soooo much from you! Thank you so much!

    ReplyDelete
  15. 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. :)

    ReplyDelete
  16. 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).

    ReplyDelete
    Replies
    1. I have one for customizing newer/older post arrows! Here ya go! http://www.venustrappedinmars.com/2013/05/saturday-sessions_18.html

      Delete

Comments make my heart go boom boom.

I respond to all comments, if you are leaving me comments and not getting a reply, you may be a no-reply blogger. Fix it HERE!