How To Create Rollover Images in Blogger

Posted by Lasantha Bandara on October 16th, 2009 File Under : html, image19 Comments

A rollover image is an image that changes to some other image when you or your customer rolls the mouse over it.

To add a rollover effect to your images use the code below.

<a href="IMAGE-DESTINATION-URL"><img src="IMAGE-1-LINK" onmouseover="this.src='IMAGE-2-LINK'" onmouseout="this.src='IMAGE-1-LINK'" /></a>

IMAGE-1-LINK : The original image link

IMAGE-2-LINK : The rollover image link

To get a good understand look at the example below.

CODE :

<a href="http://bloggertipandtrick.blogspot.com/"><img src="http://2.bp.blogspot.com/_ar9PeTUrwMY/StfeZBycIdI/AAAAAAAAAyg/Rdc5cb3TUzk/18838.jpg" onmouseover="this.src='http://1.bp.blogspot.com/_ar9PeTUrwMY/Stfedv95ncI/AAAAAAAAAyo/qKWJMwsvNes/12396.jpg'" onmouseout="this.src='http://2.bp.blogspot.com/_ar9PeTUrwMY/StfeZBycIdI/AAAAAAAAAyg/Rdc5cb3TUzk/18838.jpg'" /></a>

RESULT :

File Under : html, image

19 Responses to “How To Create Rollover Images in Blogger”

  1. Interventizio says:

    Plain and simple very helpful thanks!

  2. Email: says:

    Thanks much for this!
    This is the most efficient explanation for a simple-to-implement rollover for use on Blogger that I've seen thus far.
    I just used the code and it worked like a charm.

  3. pinkmast3ritza says:

    Dude how do I upload the photo?:|
    Thanks

  4. JJ says:

    If I copy and paste the code into blogger then what do I do then.

  5. Photography by Cesar Chavez says:

    Where do I paste this code ???

    HELP ! !!! !

  6. Photography by Cesar Chavez says:

    @Email:

    Where did you put this code ??

    Im new in blogger and I dont know where to paste the code !!

    Thanx 4 your help =)

    • Paparazzi says:

      Go to your blog design and click "Header description" or any place that you want to paste the code in. Then a pop-up window will appear. Click "Edit H.T.M.L." and paste the code.

  7. Damion Schweizer says:

    Thanks for the info. Saved me a lot of time.

  8. MedRep says:

    Excellent, Marvellous. Good

  9. Jaz says:

    Thanks! Clear and concise!

  10. René says:

    GREAT! Thanks!!!

  11. Jim says:

    Is there a way to make this work in the template? Everytime I paste it into the template and save it, it changes my " to ' and my ' to &apos;.

    So I end up with:
    href='IMAGE-DESTINATION-URL'><img src='IMAGE-1-LINK' onmouseover='this.src=&apos;IMAGE-2-LINK&apos;' onmouseout='this.src=&apos;IMAGE-1-LINK&apos;'

  12. agiil_ocon says:

    siple cede great work 😀

  13. Joelyne says:

    I have been looking everywhere for a simple rollover tute! This is fabulous! Thank you.

  14. Cor says:

    Great tip! I use it many times at my weblog: Like here: http://corrosphotoblog.blogspot.com/2011/08/doing-some-pp.html

  15. Dacritics.org says:

    Great help, extremely easy.

    All the other sites out there make it sound much more complex.

    Thanks!

  16. Fabian says:

    I wish you could add icon pop up effects to blogger as well

  17. Dino Borogovac says:

    Good post and explanation, but how to make this work on a menu on top, i have a menu with "buttons" which are pictures, the one on the right side where the "sidebar" is work with mouseover but the ones over the post dont work, do you know why?

  18. E Ams says:

    THANK YOU SO MUCH! This was so simple instead of trying to edit a php file and custom style codes.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.