Create A Rollover Image Effect - Change Image On Hover

how to create rollover image effect change on hover

Rollover Image Effect is a design feature in which an image (web object) or background image changes itself to another image when you move your mouse cursor into the area of the image and reverts back to the original image when the cursor is removed. There are various methods using which you can create rollover image effects but in this tutorial, we will use the onmouseover and onmouseout attributes of the link tag. Rollover images automatically load while a page is loading so that the rollover effect starts displaying quickly.

Check this demo to make things clearer. Place your mouse pointer on the image in order to see the rollover effect:

How to Create Rollover Image Effect

Here is the code:
<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE 
width="100" height="150" " onmouseover="this.src='URL OF THE SECOND IMAGE'" onmouseout="this.src='URL OF THE FIRST IMAGE '" /></a>
Now you need to change the colored texts as follows:

URL ADDRESS - Replace this by the link where the visitor will be sent when the image is clicked. Example, http://ultimatepcguide.blogspot.com

URL OF THE FIRST IMAGE - Replace this with the URL of the first image which will appear to a visitor before hovering over it. To get the URL of the image upload it to your blog post, copy its URL from the HTML tab and then remove it.

URL OF THE SECOND IMAGE - Replace this with the URL of the second image which will appear to the visitor on hovering over the first image. Again, get its URL by uploading it, copying the URL and then removing the image.

You can change the size of the image by changing 100 and 150 to your desired dimensions.

Having changed the colored texts, now your code is ready and you can get rollover images working with your website.

If you are using Blogger, you can add images with rollover effect into your page/post by just pasting the code in the HTML section of your New Post area or you can also add them as a gadget by going to Layout>Add a Gadget>HTML/JavaScript and pasting the code in the empty box.

And there you have it, a simple approach to image hovers. So what do you think about rollover image and will you use them on your site? I'd love to hear from you in the comments!
Create A Rollover Image Effect - Change Image On Hover Create A Rollover Image Effect - Change Image On Hover Reviewed by Aniket Kumar on 05:35 Rating: 5

No comments:

Feel free, and let me know if you have any query related to the blog post.

Powered by Blogger.