The Rollover effect is one in which an image web object changes (swaps itself) on mouse over to another web object (called rollovers) and reverts back to the original image on mouse out. Rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. The onMouseOver and onMouseOut attributes of the link tag are used to make this functional.
Demo: Place your mouse over the image below to see its rollover effect
Image source: mdgraphs.deviantart.com
Making Rollover Effect Image
You have the following code:
Change the colored texts as it follows:
1. URL ADDRESS
This is the address you want the image to lead to when it's clicked.
Example : http://www.mybloggertricks.org/
2. URL OF THE FIRST IMAGE GOES HERE
Replace the green text (two times) with image's url address - this is the image shown before you hover over it.
Example: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfju2iXOGCmMfakEfAzvxSCZPloDHiQyvF2ZKgHZwbKzdrhhZn30iHz5JZvUeUR9KbxQPidHdtuDyoU5UZp0O3vtxOOtrAJEaAGTWK67u5nX0N2F3P168TNiNANuzu61l3ABg9Op4Cq-vo/s1600/Recommended+Post+Slide+Out+Widget+For+Blogger+Blogspot.png
3. URL OF THE SECOND IMAGE GOES HERE
Replace the text in red with the url of your image - this image will appear when your cursor hovers over it.
Example: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn7wp5Q9N4c2Iv998qSweierX8S4ponw4zJRJNvLP6xeEGlxy3XRlWw7YZfjsP3WVU-gfzmUBZgLXM1jb5xNZpqOE4eDTyvJPYsGxbTs-wJL9sYeqp59rN_pCebjnQPNVHkzg-fwi7J5CH/s200/blogger+blogspot+like+recommended+posts+widget+gadget.jpg
Now you can paste your image inside a blog gadget, going to Page Elements > Add a Gadget > Select "HTML/JavaScript and add it to your sidebar Or you can add it inside your post by going to New Post > Switch to Edit HTML tab and then paste the code in the empty box. That's it.
The Rollover effect is one in which an image web object changes (swaps itself) on mouse over to another web object (called rollovers) and reverts back to the original image on mouse out. Rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. The onMouseOver and onMouseOut attributes of the link tag are used to make this functional.
Demo: Place your mouse over the image below to see its rollover effect
Image source: mdgraphs.deviantart.com
Making Rollover Effect Image
You have the following code:
URL ADDRESS">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'" />
Change the colored texts as it follows:
1. URL ADDRESS
This is the address you want the image to lead to when it's clicked.
Example : http://www.mybloggertricks.org/
2. URL OF THE FIRST IMAGE GOES HERE
Replace the green text (two times) with image's url address - this is the image shown before you hover over it.
Example: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfju2iXOGCmMfakEfAzvxSCZPloDHiQyvF2ZKgHZwbKzdrhhZn30iHz5JZvUeUR9KbxQPidHdtuDyoU5UZp0O3vtxOOtrAJEaAGTWK67u5nX0N2F3P168TNiNANuzu61l3ABg9Op4Cq-vo/s1600/Recommended+Post+Slide+Out+Widget+For+Blogger+Blogspot.png
3. URL OF THE SECOND IMAGE GOES HERE
Replace the text in red with the url of your image - this image will appear when your cursor hovers over it.
Example: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn7wp5Q9N4c2Iv998qSweierX8S4ponw4zJRJNvLP6xeEGlxy3XRlWw7YZfjsP3WVU-gfzmUBZgLXM1jb5xNZpqOE4eDTyvJPYsGxbTs-wJL9sYeqp59rN_pCebjnQPNVHkzg-fwi7J5CH/s200/blogger+blogspot+like+recommended+posts+widget+gadget.jpg
Now you can paste your image inside a blog gadget, going to Page Elements > Add a Gadget > Select "HTML/JavaScript and add it to your sidebar Or you can add it inside your post by going to New Post > Switch to Edit HTML tab and then paste the code in the empty box. That's it.
Demo: Place your mouse over the image below to see its rollover effect
Image source: mdgraphs.deviantart.com
Making Rollover Effect Image
You have the following code:
URL ADDRESS">
Change the colored texts as it follows:
1. URL ADDRESS
This is the address you want the image to lead to when it's clicked.
Example : http://www.mybloggertricks.org/
2. URL OF THE FIRST IMAGE GOES HERE
Replace the green text (two times) with image's url address - this is the image shown before you hover over it.
Example: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfju2iXOGCmMfakEfAzvxSCZPloDHiQyvF2ZKgHZwbKzdrhhZn30iHz5JZvUeUR9KbxQPidHdtuDyoU5UZp0O3vtxOOtrAJEaAGTWK67u5nX0N2F3P168TNiNANuzu61l3ABg9Op4Cq-vo/s1600/Recommended+Post+Slide+Out+Widget+For+Blogger+Blogspot.png
3. URL OF THE SECOND IMAGE GOES HERE
Replace the text in red with the url of your image - this image will appear when your cursor hovers over it.
Example: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn7wp5Q9N4c2Iv998qSweierX8S4ponw4zJRJNvLP6xeEGlxy3XRlWw7YZfjsP3WVU-gfzmUBZgLXM1jb5xNZpqOE4eDTyvJPYsGxbTs-wJL9sYeqp59rN_pCebjnQPNVHkzg-fwi7J5CH/s200/blogger+blogspot+like+recommended+posts+widget+gadget.jpg
Now you can paste your image inside a blog gadget, going to Page Elements > Add a Gadget > Select "HTML/JavaScript and add it to your sidebar Or you can add it inside your post by going to New Post > Switch to Edit HTML tab and then paste the code in the empty box. That's it.
by Jillur Rahman
Jillur Rahman is a Web designers. He enjoys to make blogger templates. He always try to make modern and 3D looking Templates. You can by his templates from Themeforest.
Follow him @ Twitter | Facebook | Google Plus
No Comment