Make A Rollover Image Effect - Image Changes On Hover

Attention: This tutorial takes you no more than 2 minutes to learn.

A rollover or mouse over image is a great image effect you will have seen used on lots of blogs and websites. When you use this effect with an image or picture you add to your blog, the image will change to a different image once you hover your cursor over it. It's also a very easy to use and can have so many uses.

Here's a preview of a rollover image. Place your cursor over the image to see it change:



The image is also a clickable link, so you can use it as a link on your blog.

More Examples : Kate the author of Cronicles Of A Country Girl has used this effect to display two versions of photos. In her words "Basically, what I wanted to show on my blog was the original photo, but if you move your mouse over it, you’d be able to see the SOOC version. (SOOC means Straight Out Of Camera)."

You can check out the results here - Kates Mouseover Images

Making Rollover Effect Image

This is the code we use to make the image:

TARGET URL GOES HERE">URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" />

You now need to customize the code by adding the images you want to use & the address you want it to lead to when clicked.

In the above code change the following:

1. TARGET URL GOES HERE
Place the address you want the image to lead to when it's clicked.
Example: http://www.spiceyupourblog.com

2. URL OF FIRST IMAGE GOES HERE (x2)
Place the URL of the first image here. This is the image shown before you hover over it.
Example: http://i941.photobucket.com/albums/ad259/spiceupyourblog/info.jpg

3. URL OF SECOND IMAGE GOES HERE
Place the URL of the second image there. This is the image that appears after your cursor hovers over it.
Example: http://i941.photobucket.com/albums/ad259/spiceupyourblog/Blogger-2.png

Once the changes are made, you are done. You can place the image in your blog posts/sidebar or anywhere html can be used.

Tip: Another cool effect for your images you want to check out is The Opacity Blurred Hover Effect.

Drop Your Comments And Questions Below.