How to: Place your cursor over the image and it changes {BEFORE AND AFTER}

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:





You will need to have your images in a hosting service like ImageShack.

This is the code we use to make the image:

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

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. I recommend to copy this code and paste it on the notepad and there you can edit it.

Once the changes are made, you are done. You can place the image in your blog posts/sidebar or anywhere html can be used. To place in the post content you just need to select the HTML tab on the upper left and then paste the code.