The Image Rollover effect is one in which image changes on moving your
mouse cursor on the image. It changes the image on moving mouse cursor
on it and reverts it back to the original image on mouse out. Image
Rollover is a popular effect used in many websites. Bloggers use this
effect for gaining visitors attention. There is nothing technical in
creating this effect, all you need is just two pictures. The onMouseOver
and outMouseOut attributes are used to make it functional. Image
Rollover is a simple trick that you can use for gaining attention of
your visitors.
Move your Mouse Cursor on the Image below to see how it works:
How to Create an Image Rollover Effect
Here's the code for creating a Rollover Effect:
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE" onmouseover="this.src='URL OF THE SECOND IMAGE'" onmouseout="this.src='URL OF THE FIRST IMAGE" /></a>
Customization:
- Replace URL ADDRESS with the URL where you want to redirect people on clicking
- Replace both URL OF THE FIRST IMAGE with the URL of your first image
- Replace URL OF THE SECOND IMAGE with the URL of your second image (That will appear on mouse hover)
How to Use Image Rollover Effect in Blogger Posts
Log in to your
Blogger Account >> Select a
Blog >>
New Post and Switch to
HTML tab. Now copy the above code and paste it where you want to add the image in your post. Make necessary customizations and
Publish your Post.
How to Use Image Rollover Effect in Blogger Sidebar
Log in to your
Blogger Account >> Select a
Blog >>
Layout >>
Add a Gadget and select
HTML/JavaScript gadget from the list. Paste that code, make necessary customization and click
Save button.
Facebook Comment
