Create A Rollover Image Effect (change image on mouseover)

at May 31, 2012
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.bloggerchive.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 ;)
Tags: , ,

Comments/disqusion
62 comments

  1. says:

    the page search for long time sure

  2. says:

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

  3. says:

    Thank-You! I love it!

  4. says:

    put the size after mouseout url

    onmouseout="this.src='URL OF THE FIRST IMAGE GOES HERE'"width="190" height="50" />

  5. says:

    Thanks

  6. says:

    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!

  7. says:

    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

  8. says:

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

  9. says:

    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!

  10. says:

    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?

  11. says:

    how it use...?

  12. says:

    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?

  13. says:

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

  14. says:

    This works excellent i hope old browsers can handle it

  15. says:

    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?

  16. says:

    That works great. Thanks for the tutorial!

  17. says:

    thanks

  18. says:

    how to use this on post images

  19. says:

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

  20. says:

    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?

  21. says:

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

  22. says:

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

  23. says:

    Thanks.. it's very helpful..

  24. says:

    Thank you very much , the simplest way ever ;)

  25. says:

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

  26. says:

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

  27. says:

    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?

  28. says:

    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

  29. says:

    thank you so mutch!!!!!

  30. says:

    Just what I was looking for. Great job.

  31. says:

    Hi,

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

  32. says:

    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?

  33. says:

    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?

  34. says:

    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.

  35. says:

    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?

  36. says:

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

    ex::

  37. says:

    Big thanks!

  38. says:

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

  39. says:

    make the both images size same like WIDTH and Height.

  40. says:

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

  41. says:

    thank you!

  42. says:

    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? :(

  43. says:

    Hi Alexandra,

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

  44. says:

    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!

  45. says:

    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.

  46. says:

    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!

  47. says:

    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?

  48. says:

    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!!!!!!!!!

  49. says:

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

  50. says:

    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

  51. says:

    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!

  52. says:

    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!

  53. says:

    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! :)

  54. says:

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

  55. says:

    use latest version of mozilla firefox

  56. says:

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

  57. says:

    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

  58. says:

    TOO GOOD!! thank you :D :D

  59. says:

    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.... :/

  60. says:

    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?

  61. says:

    im not getting immage as u describe

  62. says:

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