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 the 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 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 ;)

Related: How to Create Rollover Image Effect using CSS.

67 comments:

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

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

      ex::

      Delete
  2. 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
  3. 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
  4. 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
  5. Eff yah.. have been searching for this for an hour. Will be implementing with navigation buttons on www.freebitcoinsite.com.. thanks alot

    ReplyDelete
  6. 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
  7. thanks a lot, i was using css to do this, but this seems quicker for my situation.

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

    ReplyDelete
  9. 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
  10. That works great. Thanks for the tutorial!

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

    ReplyDelete
  12. 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
  13. Hi, I'm using the rollover effects but when you click image it disappears as the new page loads.Www.tuckeriplaw.com.

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

    ReplyDelete
  15. Thank you very much , the simplest way ever ;)

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

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

    ReplyDelete
  18. 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
  19. 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
  20. Just what I was looking for. Great job.

    ReplyDelete
  21. Hi,

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

    ReplyDelete
  22. 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
  23. 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
  24. 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
    Replies
    1. make the both images size same like WIDTH and Height.

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

    ReplyDelete
  26. i tried this, but it doesn't work on livejournal. do you know how it'd be possible to make it work there?

    ReplyDelete
  27. I've put the code in and everything looked like it should work, but when I save the widget and reload the page to test it out, Blogger changes the HTML! So instead it looks like this:

    img blogger_onmouseover="this.src='image2'" blogger_onmouseout="this.src='image1'" src="image1"

    It changes the order around and adds that 'blogger_' infront of the two image sources, so I can never get the code to work. Anyone know why Blogger is doing this or how to fix it? :(

    ReplyDelete
    Replies
    1. Hi Alexandra,

      Could you please send me the code or the pictures urls to test it for myself?

      Delete
    2. I got it to work now, thanks for the code :) I just have to save the widget without tabbing back into rich text mode so Blogger doesn't get the chance to change the HTML!

      Delete
  28. Hi!

    Thanks a lot for the code, it works perfectly!!!

    I just have a question: is it possible to open a new window when clicking in the image? I don't want people leaving my website, it would be great if it could be opened in a new window, not in the same. Is there any way to do it?

    Thanks a lot,

    Marc.

    ReplyDelete
    Replies
    1. Hi Marc,

      You will need to add the target="_blank" attribute to your link like this:
      <a href="URL ADDRESS" target="_blank">

      Thanks for visiting!

      Delete
  29. Thanks for the very useful tutorial. Anyway, i used this method on my blog's tab menu. And it works perfectly except for the last link. It just appeared as image & not as lin. Plus, nothing happened when i hover on the last link. What have i done wrong?

    ReplyDelete
  30. Hello Help Blogger ! Thank You for Your Super Blogger Tricks. i need Some help from you . Visit -http://www.makingdifferent.com and at the end you can see a panel link bluehost, wordpress, jquery,html5,css3 and when we mouse hover the uncoloured image changes into the coloured one. How can we do so? if you have some code please please send me on redkhabar@gmail.com. Waiting For Your Response

    ReplyDelete
  31. At last.......................I found it. Very useful tutorial. It is working in Mozilla Firefox etc. The widget rollover code that I added in my sidebar widget didn't work after I copied & pasted it in one of my Blogger pages.
    Your code does. Thank so much for this code!!!!!!!!!

    ReplyDelete
  32. And what if I wanted to make the image disappear when the mouse is not over it? Is that possible?

    ReplyDelete
  33. hello, thankyou for your awesome tuts :D
    i want to ask if this move is possible in 'read more' image? can you please help me with the code? thanks in advance~XD

    ReplyDelete
  34. How would I have it change two images? I'm trying to make a rollover that turns the active button off when rolled over but back on when rolled off!

    ReplyDelete
  35. Good afternoon,
    I am attempting to use the code to create a mouseover on a SharePoint 2013 site and it works until I press save. What can I do!

    ReplyDelete
  36. Hi! I'm really new to blogging and I'm slowly teaching myself a lot of this coding business just by googling. I was just wondering if you knew how to get a rollover image like the ones on this page?http://www.lilypebbles.co.uk/p/shop.html as you rollover, you get the name and price of the item?
    Thankyou! :)

    ReplyDelete
  37. Thanks, it was vey useful for me, cool blog by the way

    ReplyDelete
  38. the code is awesome i have used it and share more image hover codes!

    ReplyDelete
  39. Very nice and easy method, thanks! I wonder how would I make this work if one rollover needed to swap images in two places, any suggestions?
    Many thanks,
    Magic

    ReplyDelete
  40. TOO GOOD!! thank you :D :D

    ReplyDelete
  41. I'm trying this in WP... the original image displays, the link works when clicked, but it's not swapping to a new image when the mouse rolls across. I am stumped.... :/

    ReplyDelete
  42. Thanks for the fool proof tutorial! I'm wondering if there is a way to make the image transparent with text over top when hovering, rather than an entire new image. Would this require an entirely different snippet or tutorial?

    ReplyDelete
  43. im not getting immage as u describe

    ReplyDelete
  44. Thanks! It works flawlessly in my widget bar on my wordpress site. :)

    ReplyDelete
  45. Works perfectly - nice and simple. Everybody else makes it so complicated! Thanks so much!

    ReplyDelete