How to Create Rollover Image Effect (Change Image on Mouseover)

You usually visit some websites and seen that some users are added rollover effects on images and whenever a user however a mouse on that image then image will be changed to another image but when user mouse out, it will take its original position. This is called rollover image effect and today we will going to share all about it in this tutorial and completely show you that how you can easily apply this feature on any of your webpage.

You can also use it and add any type of CSS buttons to your posts and apply different colors on them so whenever users mouseover on your buttons then they will be automatically changed to another button but mostly users want to use images in this function because as you know that it’s specially designed to give your webpages one new look and you can also customize it according to your needs.

If you want to check the demo of rollover effect on image then place your mouse on below blogger image and see the magic.

We hope you’ve liked it and now below is a complete tutorial about how you can add it to your posts and pages or anywhere else where you want to give your images one new look.

Creating Rollover Image Effect

Copy below code and paste it on any webpage, where you want to apply rollover image effect.

<a href="LINK-OF-WEBSITE"><img src="URL-OF-YOUR-FIRST-IMAGE" onmouseover="this.src='URL-OF-YOUR-SECOND-IMAGE'" onmouseout="this.src='URL OF YOUR FIRST IMAGE'" /></a>

Making Some Changes in Above Code

Here are some changes that you need to make in above code.

1. Link of Website

You can simply replace LINK-OF-WEBSITE with any URL because whenever user click on it, so it will be redirect on this link. You can also call it hyper link on image.

Example: we can past our website URL: http://www.spicebloggertricks.com

2. URL of First Image

Replace URL-OF-YOUR-FIRST-IMAGE (two times) with the URL of image, which one you want to display before users mouse however on it.

3. URL of Second Image

Replace highlighted green URL-OF-YOUR-SECOND-IMAGE with the URL of Image that you want to display when users mouse however on it.

After making these all changes, Your images will be ready to display and you've done all steps successfully.

Adding Rollover Image Effect in Blogger

If you want to add this affect in blogger blog then simply follow below steps.

Go to Blogger Dashboard>> Layout>> Add Gadget.
Select HTML/JavaScript and Paste rollover image coding that you’re recently made in above steps.
Now click on “Save” and you’ve successfully done it.

If you want to add this effect in your posts and pages then simply follow below steps.