Rollover Image Effect Without CSS3 - Image Changes On Hover


Best Commentator: Apple iPhone 7 Plus (256 GB) WINNER: Michalina Logan
To claim your prize, please send us an email.


Rollover Image Effect
Now you can create a Rollover Image effect for your blogger or website without using any CSS3 or J query. Are you confused about Rollover Image effect? Rollover effect is one in which an image web object changes on mouse over to another web object. It becomes in default style or preloaded when it is preloaded. Its so fast and you can also use the hyperlink to this Rollover Image Effect. Its also very easy to use and can have so many. uses.


To see the demo▼ place your mouse point over the below image and feel the miracle.

Puppy and Cat


If u wanna see more example, Kate the author of Cronicles Of A Country Girl is a big fan of Mouse hover effect display of photos.She has used this Effect to her blog. you can check out her blog - Kate's Mouse over Images

Below is the code we use to make the rollover image Effect
___________________________________________________________________________________________

 <a href="Image Link Goes Here"><img src="URL OF FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF FIRST IMAGE GOES HERE'" /></a>
___________________________________________________________________________________________

Now you have to customize the code by adding the image URL and should give the correct link address to lead to when you clicked. so please try to make these changes. 

  • Image Link Goes Here 

           Add a url to your image and its the address to lead to when you clicked.
 
  • URL OF THE FIRST IMAGE GOES HERE

    You can see this sentence twice in your code. So please change both sentences with your same image URL.

  • URL OF THE SECOND IMAGE GOES HERE

    Place the URL of the second image there, this is the image that appears when your mouse cursor hovers over it. (hover on the first image)

If you wanna see a sample code, see it below
___________________________________________________________________________________________

<a href="http://www.labstrikes.blogspot.com/"><img onmouseout="this.src='http://2.bp.blogspot.com/-2fFldxs9yQs/T-_V_EJdd0I/AAAAAAAAAyA/KJW_5b9XVkM/s320/Cute_puppy_Wallpaper.png'" onmouseover="this.src='http://1.bp.blogspot.com/-5dkOUAP6FN4/T-_WHW6m3II/AAAAAAAAAyI/d4gt89uYHIg/s320/Cute_Cat.png'" src="http://2.bp.blogspot.com/-2fFldxs9yQs/T-_V_EJdd0I/AAAAAAAAAyA/KJW_5b9XVkM/s320/Cute_puppy_Wallpaper.png" /></a>
___________________________________________________________________________________________

So you have done. Now you can paste this image in your blogger sidebar or in your blog post. To add this image in your blog post go to New Post > Switch to Edit HTML tab and then paste the code in the empty box. To add this image  in sidebar go to Page Elements > Add a Gadget > Select HTML/JavaScript and paste the code. Finally save it. Thats all:)