How to Create an Awesome Rollover Image effect for Blogger or website

Awesome Rollover Image effects for blogger/Website

(Change image on mouseover)

Create your own Rollover image is a cool effect which it swap the image if you roll your mouse over the image and reverts the image to its original if you remove your cursor inside the image, So rollover Mouse effect is a preloaded into the page if its loaded, in this way it insure that the image will display quickly, so now im going to share this amazing Rollover image effects for b logger

LIVE DEMO

Point your Mouse Cursor to this image below

STEP BY STEP TUTORIAL

STEP #1
First Copy this following code Down below

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

STEP #2

You Need to change the Following URL

URL ADDRESS
First you need to change "URL ADDRESS" into your own URL Address 
Example : twitter.com/rhonznet

STEP #3

URL OF THE FIRST IMAGE GOES HERE
Second you need to change "URL OF THE FIRST IMAGE GOES HERE"  into your First Image to appear.

STEP #4

URL OF THE SECOND IMAGE GOES HERE

Third you need to change "URL OF THE SECOND IMAGE GOES HERE"  Into your Second image that will show if you hover your cursor into the image

IF YOUR USING BLOGGER USE THIS STEP

First go to Layout > Add Gadget > HTML/Javascript > Add the code > Save !

Now you can enjoy cool Rollover image effects for your blog or site

Tweet