Create A Rollover Image Effect (change image on mouseover)

The Rollover effect is one in which an image web object changes (swaps itself) on mouse over to another web object (called rollovers) and reverts back to the original image on mouse out. Rollover images are preloaded into the page when it is loading, this ensures that the rollovers are displayed quickly. The onMouseOver and onMouseOut attributes of the link tag are used to make this functional.
Demo:  Place your mouse over the image below to see its rollover effect


Making Rollover Effect Image

You have the following code:

<a href="URL ADDRESS"><img src="URL OF THE FIRST IMAGE GOES HERE" onmouseover="this.src='URL OF THE SECOND IMAGE GOES HERE'" onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'" /></a>

Change the colored texts as it follows:

1. URL ADDRESS

This is the address where somebody will be sent when clicks on the image.
Example, my blog address: http://www.helplogger.blogspot.com

2. URL OF THE FIRST IMAGE GOES HERE

Replace the orange text (two times) with the URL address of the image which will appear before you hover over it.

3. URL OF THE SECOND IMAGE GOES HERE
Replace the text in blue with the url of  the image that will appear when the cursor hovers over it.

Now you can paste your image inside a blog gadget, going to Layout > click on Add a Gadget link (right side) > Select HTML/JavaScript from the pop-up window, then add it to your sidebar.

You can also add it inside your post by going to New Post > Switch to HTML tab and then paste the code in the empty box.

That's it. Enjoy ;)

    Random Posts

55 comments:

  1. Why not to use CSS Sprite? I tried it but it increases the page loading time. CSS sprite is better idea though it take some time and work its worth.

    ReplyDelete
    Replies
    1. Yes Agree With You. CSS Sprite Can Atleast Decrease http Requests :)

      Delete
  2. the page search for long time sure

    ReplyDelete
  3. Is this trick is right for our blog? Because CSS make blogs loading heavy..

    ReplyDelete
  4. Anonymous9/29/2012

    what if i want to chagne the size of the images?

    ReplyDelete
    Replies
    1. Then You Also Need To Add Extra CSS Code. If Want To Change Size Of Image On Hover

      img:hover
      {
      zoom: 125%;
      }

      Delete
    2. Anonymous2/01/2014

      for changing width & heightof an image,,image tag has 2 properties.
      1)height
      2)width

      ex::

      Delete
  5. Wow!!

    Thanks for the wonderful trick. Really this effect will make my blog Mash2 Blog wonderful.

    ReplyDelete
  6. This site is good, thanks

    ReplyDelete
  7. Hey i know CSS Sprites but i dnt want to use that so i was searching for a event clicks and i got it here.. Thanks a lot for sharing this... this is what i want

    ReplyDelete
  8. thanks for this tutorial. thumb up

    ReplyDelete
  9. I entered in the code but nothing is happening... the picture isn't loading and it's just left an empty box where the picture should be. Advice?
    Thanks!

    ReplyDelete
    Replies
    1. Hi Jordan,

      I see no reason why they would not appear. Could you please send me the code that you have entered or the url of your pics? My e-mail address is helplogger76@gmail.com

      Delete
    2. I got it! I was using the wrong embedding link... thanks for your support.

      Delete
  10. Anonymous3/27/2013

    Thank you for this tutorial! It works great when I post the code into a Blogger post, but when I try to add the code as a widget in the crosscol section, it doesn't work - doesn't change when I hover, and also isn't clickable. I wondered if the container was locked or something, but that doesn't seem to be the case. Any thoughts as to why this is? My email is kvaughndesign@gmail.com. Thank you!

    ReplyDelete
  11. Thanks for the code, simple and clean code to use..

    ReplyDelete
  12. I'm working in wordpress and it works in my edit mode but when I preview it it doesn't work. What do you think is wrong?

    ReplyDelete
    Replies
    1. Rachel Make sure your url is correct and some browsers do not read correctly. Try Internet Explorer. I am working with Wordpress aswell it works fine for me..

      Delete
  13. Eff yah.. have been searching for this for an hour. Will be implementing with navigation buttons on www.freebitcoinsite.com.. thanks alot

    ReplyDelete
  14. Thank you so so so much! Do you know how to make it fade? Like when you roll over it fades easily instead of just the rollover?

    ReplyDelete
  15. thanks a lot, i was using css to do this, but this seems quicker for my situation.

    ReplyDelete
  16. This works excellent i hope old browsers can handle it

    ReplyDelete
  17. This code dosen't me work in IE 8 when i put it in my html. But when i see this site in IE8 the code works right. What can i do?

    ReplyDelete
  18. That works great. Thanks for the tutorial!

    ReplyDelete
  19. how to use this on post images

    ReplyDelete
  20. where do i put this code?? how to use this? layout edit html or ? the tutorial is incomplete..

    ReplyDelete
  21. oldiskulboy, you can place it anywhere you want. Layout >>> HTML gadget was mentioned for social media icon use, example twitter icon from this post, also there was mentioned that you can use it in your posts too.

    but on the other hand:
    something strange happening, i managed to make it work once and lost it after few hours and i cannot redo it.
    i have a code like this:



    but it's not working for me, anyone have any idea?

    ReplyDelete
  22. Hi, I'm using the rollover effects but when you click image it disappears as the new page loads.Www.tuckeriplaw.com.

    ReplyDelete
  23. Hi , I know Im Typing It Right But it Doesn't Work!!! :( Why?

    ReplyDelete
  24. Nice tutorial :) i very like this.. but this seems quicker..
    Thanks

    ReplyDelete
  25. Thanks.. it's very helpful..

    ReplyDelete
  26. Thanks bro, i have used this code to my profile pic on my blog in the author bio! :)

    ReplyDelete
  27. Anonymous10/31/2013

    Thank you very much , the simplest way ever ;)

    ReplyDelete
  28. Admin, can you write a tutorial when mouse hover to hyperlink, an image come out above the hyperlink. I want the code.

    Thanks

    ReplyDelete
  29. Anonymous11/07/2013

    Hi, do you know how to delay the onmouseover? Thanks

    ReplyDelete
  30. I have exactly zero HTML skills, but this worked for me! Thank you for making it idiot-proof!

    ReplyDelete
  31. I'm having problems getting the images to show, I'm using a text widget to place these in the sidebar. here is the code

    is it wrong?

    ReplyDelete
  32. I'm having problems with the image showing up
    I'm using text widget for a sidebar, here is the code can you let me know if it is wrong

    ReplyDelete
  33. thank you so mutch!!!!!

    ReplyDelete
  34. Just what I was looking for. Great job.

    ReplyDelete
  35. Hi,

    Above code i was trying in HTML but am facing issue of mouse over please help me.

    ReplyDelete
  36. Sujit kumar Thakur
    I want to change color of a header from black to red when the mouse is over it and changes it black to black when the mouse moves away?

    ReplyDelete
  37. If I wanted to create two images that appear next to eachother, how would I do that?

    I tried entering the same code twice (switching the URL's) and it works but the images show up on top of eachother. They should fit next to eachother.

    Is there an extra line of code I would need to keep the two elements on the same line?

    ReplyDelete
    Replies
    1. Hi Andrew,

      Try to add this style before and after your code and see if it works:
      <div style="display: inline-block; float: left">Here add the code for the images</div>

      If it doesn't work, it is possible that the width of your sidebar (or the container in which you have added the pics) to be smaller than the width those images need to occupy. In this case, you can either change the size of your pics (by adding width="100px" height="100px" after the <img tag, then modify 100px value to change the size of your pics) or increase the size of the container.

      Also, please check that you don't have any <br/> tag between the two codes.

      Delete
  38. I am using your image rollover instructions with success. However, each time I insert the code the 1st image enlarges from it's original size. How do I prevent this from happening?

    ReplyDelete
  39. hi, this information so good, thanks. . .

    ReplyDelete
  40. Anonymous2/08/2014

    Big thanks!

    ReplyDelete
  41. this code is working in google chrome but not in ie & Mozilla Firefox please help

    ReplyDelete
  42. Nice useful trick. Thank you for sharing it.

    ReplyDelete