Rollover image effect means the image will change upon the sense of touch on it. If you give this effect to any image on your blog then the image will change on mouseover. You can give this kinds of effect anywhere in your blog. You can apply this to your social icons on your blog or in any image inside your blog post like this( place your mouse cursor on the image to see demo effect)-
For example:
3. Save your gadget. You are done.
Steps:
1. If you want to add this type of image effect on the sidebar of your blog then go the Layout page of your blog and add a HTML/JavaScript gadget.
2. Paste the following codes in the gadget after editing the necessary portions. You can also resize your image according to your sweet will.
<a href="Your page/Target URL"><img src="URL OF THE FIRST IMAGE" onmouseover="this.src='URL OF THE SECOND IMAGE'" onmouseout="this.src='URL OF THE FIRST IMAGE'" width="200" height="200"/></a>
For example:
<a href="https://web.facebook.com/techknowledgeblog"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaBnFEkmInM4mJ5nURmS7b6moKPa16i_d_HBpPTauorWu04n7nnxsWC6Aeb0ihAYk6mZ4V9yERRPaFWkRKXeEh2hQrh6cZTlEaF6c8BhOIUD6RIpzXftKg5Ig8a4JuQj_-aDi8LcwatSg/s1600/facebookLogo1.png" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzRNKAFU446JqfYOXhvwlObXJDdEC99953eX_vy7fRY2CT3bOaPk8xEtxAOLptd2q_bUKlWXXpxZ-EpCa8qUBUCW7wTuY6O9kZVmh1XV8BDGHpPWY-jtn-h5WKG03JI6LNl5zxuTWfOy0/s1600/facebookLogo2.png'" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaBnFEkmInM4mJ5nURmS7b6moKPa16i_d_HBpPTauorWu04n7nnxsWC6Aeb0ihAYk6mZ4V9yERRPaFWkRKXeEh2hQrh6cZTlEaF6c8BhOIUD6RIpzXftKg5Ig8a4JuQj_-aDi8LcwatSg/s1600/facebookLogo1.png'" width="200" height="200"/></a>
3. Save your gadget. You are done.
Notice:
If you want to add this image effect inside your blog post then put the codes in the HTML section.
0 comments:
Post a Comment