How to create rollover images on blogger // Blog Restyle

I've been updating a few things on the blog this past week, and one of those is adding an over image effect to the DIY and freebies pages. Most of you probably already know this, but for those who don't it is actually pretty simple and it has just one more line of code than the regular icons, I posted last year.

Place your mouse over the image to try it out.

This is the code you will need:

<a href=""><img src="FirstImageUrlHere.jpg"onmouseover=
"this.src='SecondImageUrlHere.jpg'"onmouseout="this.src='FirstImageUrlHere.jpg'" /></a>

1. Upload your images to a photo hosting site like photobucket, flickr or tinypic.

2.Copy the code and paste in where to want the image to be, put the url to the page where it says: linkgoeshere, the url to the fist image on: FirstImageUrlHere.jpg and the second/over image on: SecondImageUrlHere.jpg.

3. Lastly do a test to see if it's working properly.

Have a great Monday,


  1. This is really helpful, thank you for sharing ♥
    Amy xx

    Perfect Imperfections

  2. How cool! I've been trying to find how to do this, but this is by far the easiest post I've come across. Thanks for the tutorial!

  3. Bluehost is ultimately one of the best hosting provider with plans for any hosting requirments.


Post a Comment

back to top