How To Make A Rollover (Onmouseover) Images Effect In Blogger

Hello friends, today I am going to show you a HTML trick to make your web images change when you place a your cursor. I don’t need to elaborate this effect more clearly because I think you might have observed these type of effects in many webpages/blogs in the internet.
But still, who are newbie bloggers I am telling for you. When you use this effect with an image or Picture you add to your blog the image will change to different image once you hover your cursor over it. It's also a very easy to use and can have so many uses.
Here is a Live preview of a onmouseover image, Place your cursor over the image to see it change:

Also this image is also a clickable link so you can use it as a link on your blog. Isn’t it cool ?
Ok then let me explain how did I do this ?

How To Make A Rollover (Onmouseover) Images Effect In Blogger

This is the code I used to make this rollover trick on images.

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

You need to customize the above code by adding the images URL and your blog URL when you want to lead the image to the destination/homepage when clicked on it.
Change according to this instructions :

1. BLOG-URL-GOES-HERE

Add the destination URL that you want the image to lead when it’s clicked.
For Example : http://www.digitalnavigate.in/

2. URL-OF-FIRST-IMAGE-GOES-HERE (Twice)

Add the URL of the first image. In the above live preview we have used the below image URL as the first image.
For Example : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy5YY3kg_O5aFZXMcnoakn8vNI2smg8hMRjpiCsUKGTHvmp4A3uakjZxvvo-6buthlSDYkOMSe5i2tO-eP_GMBisvEqe1xBND3_qJwfp9vAzJdmuAKgOFpk04XOrPVTyXxXY6uVVcEEIE1/s1600/onmouseover-image-1.png

3. URL-OF-FIRST-SECOND-GOES-HERE

Add the URL of the second image. In the above live preview we have used the below image URL as the second image.
For Example : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtLOLPm8GARUdXWsbnaSBBzDd30RvNJ3a1Cde_FIc1obOa2dwOuc0fdtESimG_X6U-DfAO_ToJzivIUSK4ieubumhdQLlf79dJmtVVI7fjFrGrRYzkwQtCoeKr8A-ZFjnWpHKvB7185qDZ/s1600/onmouseover-image-2.png
How did you like this tutorial ? Drop your valuable comments below.