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. Very best along with Most economical Jabodetabek Personal Instructions, the workers in addition to trainers appear home, established your very own analyze timetable and will select any industry associated with examine ... visit for further

  4. Jabodetabek private tutoring services with teachers arriving at the house. More than many hundreds of active tutors will be ready teach various skills and lessons for youngsters to adults ... click for more details

  5. This site offers private lessons for PAUD, TK, SD, SMP, SMA, and Alumni. With an incorporated and accelerated method, it can be hoped which it can foster an era of individuals with good morals... click for more information


Post a Comment

back to top