How to create Roll over image for blogs or website

Roll over image is a image effect used in websites. When your mouse point move over the image, it will change to another image. See example below.  Roll over image effect make your blogs/websites image link very attractive. You can change your images to roll over image with very simple steps.

Example of a roll over image here. place your cursor over the below image:

To create your own Roll over image like this. Do this simple steps:
  • First thing is you want two images
  • Copy below html code and paste it on your website or blog and follow below instructions.
<a href="URL Link"><img src="URL OF THE FIRST IMAGE PASTE HERE" onmouseover="this.src='URL OF THE SECOND IMAGE PASTE HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE PASTE HERE'" /></a>

  • URL Link: Insert website link here. when user click on this image they goes to this link. If you do not want to add link on image leave it blank. (Example:
  • URL OF THE FIRST IMAGE PASTE HERE: Insert your First images link here. (Example:>
  • URL OF THE SECOND IMAGE PASTE HERE: Insert your second images link here. (Example:>
  • After completing this steps you are done save it.
                          Roll over image is very useful for bloggers and website builders. Proper use of this Role over images may make your website/blog more attractive and user friendly. 


  1. I have tried this when I was learning web designing I put a different image for mouse click too. It’s very fun to new thing I enjoy trying new.


Post a Comment