Make A Rollover Image Effect - Image Changes On Hover




| 119 comments

HTML LOGO
Attention: This tutorial takes you no more than 2 minutes to learn.

A rollover or mouse over image is a great image effect you will have seen used on lots of blogs and websites. When you use this effect with an image or picture you add to your blog, the image will change to a different image once you hover your cursor over it. It's also a very easy to use and can have so many uses.

Here's a preview of a rollover image. Place your cursor over the image to see it change:



The image is also a clickable link, so you can use it as a link on your blog.

More Examples : Kate the author of Cronicles Of A Country Girl has used this effect to display two versions of photos. In her words "Basically, what I wanted to show on my blog was the original photo, but if you move your mouse over it, you’d be able to see the SOOC version. (SOOC means Straight Out Of Camera)."

You can check out the results here - Kates Mouseover Images

Making Rollover Effect Image

This is the code we use to make the image:

<a href="TARGET URL 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>

You now need to customize the code by adding the images you want to use & the address you want it to lead to when clicked.

In the above code change the following:

1. TARGET URL GOES HERE
Place the address you want the image to lead to when it's clicked.
Example: http://www.spiceyupourblog.com

2. URL OF FIRST IMAGE GOES HERE (x2)
Place the URL of the first image here. This is the image shown before you hover over it.
Example: http://i941.photobucket.com/albums/ad259/spiceupyourblog/info.jpg

3. URL OF SECOND IMAGE GOES HERE
Place the URL of the second image there. This is the image that appears after your cursor hovers over it.
Example: http://i941.photobucket.com/albums/ad259/spiceupyourblog/Blogger-2.png

Once the changes are made, you are done. You can place the image in your blog posts/sidebar or anywhere html can be used.

Tip: Another cool effect for your images you want to check out is The Opacity Blurred Hover Effect.

Drop Your Comments And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

119 comments:

  1. Thanks for posting such amazing things.

    ReplyDelete
  2. So simple and easy to follow thank you! Worked perfectly first time!

    ReplyDelete
  3. Thanks Brumby,

    Its a great effect, if you seen it on a blog or website you would think 'I would like to do that but i bet it would need a lot of code'.

    Its amazing how some of the best tricks are the easiest ones.

    Paul.

    ReplyDelete
  4. Thankyou for the tip - I have just made a logo so this will be so useful.

    ReplyDelete
  5. Hi Leaves, thanks for the comment if you need more help just ask.

    Paul.

    ReplyDelete
  6. Once I have completed the code with my 2 images URL ( I use tinypics ) Can I go into Blogger, Get Gaget, HTML/Java Script/ and add the code in there?
    I am excited to figure this out and have before and after images on my site just like Florabella! Yeah! Thank you for posting!
    My site:www.amelyajaynephotography.com I will be doing all rollover images on my "Darkroom" page. It is listed under "For Photographers".

    Thanks!

    ReplyDelete
  7. I don't understand the target URL. Where would I be pointing to. What address goes in there?

    I am trying to create a roll over on my blog.

    Thank you.

    ReplyDelete
  8. @ JJ - The target URL is the address people will go to if they click the image.You can put any address there or you just could leave it blank.

    ReplyDelete
  9. @ Kathleen - Yep well done you can add the images to a Html/Javascript gadget.Remember the space in your sidebars will be limited so make sure the images are not too big.

    ReplyDelete
  10. great tutorial! I like that this doesn't require any alteration to the < head >. :)

    ReplyDelete
  11. Thank you Paul for your advice.

    ReplyDelete
  12. Hello again Paul.

    I wonder if you could help me with this on roll-overs. I followed your code and have succeeded with a good roll-over on my blog. But now I'm finding I can't create one that is clear. The images are appearing blurred...I can't understand it. When I first click on the image in blog editor the image looks fine but then goes blurred.

    Can you please help?

    Thank you.

    ReplyDelete
  13. @ JJ - It could be the images or the sizes of images your using.The code for the rollover image wont effect the image display.

    ReplyDelete
  14. Hi Paul

    I have resolved it today. What I was doing wrong was this.

    When I uploaded my images from my pictures done in Serif Drawplus into the ‘add images’ box on my blog, I was right clicking on the thumbnail then clicking on properties for the URL.

    What I should have done and did do, was add the selected images into compose in the blog editor and then right click on the added images for the URL. This then gave me much larger images which do not distort. Then using your example and substituting I came out with perfectly sharp images. It doesn’t appear to matter about the size of image created in Drawplus, all sizes work fine.

    Many thanks.

    ReplyDelete
  15. Thank you SO MUCH!!! I have been looking all over for a simple way to do this and this tutorial is PERFECT and worked right away!!!! Great job.

    ReplyDelete
  16. I would truly love to learn this. It seems so simple, but since I'm not very savvy, can you tell me what the initial step is? I have uploaded the images in Photobucket so I can get a URL of each. Do I start the post in Blogger by uploading the image or just typing the HTML code. I attempted to copy your HTML but when I add to by post it is grayed out. Thanks for your help.

    ReplyDelete
  17. @ Marilyn - I you have the images on Photobucket you need to copy the direct URL from Photobucket into the positions shown in the code.

    ReplyDelete
  18. Hey Paul,

    Thanks for share something like this.

    Since i'm a new comer to this blog thing, i need so many read the trial and error for myself. Your explanation just gave me a huge help!

    again, Thank You!

    ReplyDelete
  19. Thanks for the rollover tip. I can't wait to give it a try.

    http://www.kjlovesphotography.blogspot.com

    Bright blessings,
    Kathy

    ReplyDelete
  20. thanks and tried - works great
    could the second picture be an animated gif?

    ReplyDelete
  21. Hi Paul

    For sometime I've been able to create rollovers with your help in Blogger, but now I've been unable to do so because of cross-site scripting notification. I can put the images into your code but no rollover.

    I have disabled XXS(filter), and allowed mixed content...but to no avail.

    I'm using XP Home with IE8, I'm not using any other browser.

    Are you able to help? Thank you.

    ReplyDelete
  22. Thank you so much for this tutorial! I run a photography website, and this will help a BUNCH with before & after photos for retouching and the like.

    You did a great job describing it, and made it extremely simple to understand. Thanks again!

    ReplyDelete
  23. Hi, this sort of worked for me. Once I rolled my mouse over the image, the 2nd image didn't appear. Instead I got a 'photobucket image removed' message. To answer the obvious question, no my image wasn't deleted, I triple checked. So close!....this is the closest I've gotten to making the mouse roll over work for me. Any ideas?

    ReplyDelete
    Replies
    1. Jeasnie the code is doing what it's supposed to the problem is with the image.I never ever recommend using Photobucket for image hosting I even have a post about it in the archive, you can host all your images on Blogger for free.I imagine the problem with your photobucket image is bandwidth exceeded.

      Delete
  24. Does this work on Tumblr? Where would I input this code?

    ReplyDelete
    Replies
    1. I can't get it to work in Tumblr...It just shows the first image and the click through link...:( any way to make it work?

      Delete
  25. THANK YOU! Saved my coding-incompetent butt haha

    ReplyDelete
  26. Helllo nice job

    ReplyDelete
  27. Nice dude..!!!!..u have save my site......!!!....www.jomsedut.org

    ReplyDelete
  28. Thank a lot worked great!!!

    ReplyDelete
  29. Hi There,
    I've been trying this for the last hour and I can't get it to work. I copied the code into HTML and replaced the 2 images, i tried URLs from facebook, redbubble and my own blog posts. I remembered to post the first url twice.
    My first image is there but nothing happens when I roll over, except that the outside faint border changes colour from blue to red. I'm trying to do this in a wordpress post. check out the post here (and my fail) http://beavercity.wordpress.com/2012/07/10/balloon-days/
    any suggestions as to what i'm doing wrong?

    ReplyDelete
  30. How can i slow down the hovering? Like make the post flow together

    ReplyDelete
    Replies
    1. Irina - With this code there is no way to slow down the transition between images.

      Delete
  31. The first image appears, but not the second :( it has an X in the top left corner, even thought i added both images to the library of my CMS.

    ReplyDelete
  32. Thanks for the code! I'm having a problem with it though-
    When I put my mouse over, it changes to the second image. However, when I remove my mouse the second image stays. I can't figure out how to get it to change back...
    Here's where I'm trying to use it- http://itsonlywasteland.blogspot.com/p/diy.html

    ReplyDelete
    Replies
    1. I'm having this same problem. Were you able to resolve it?
      Thanks!

      Delete
    2. SAME problem.. any solutions?

      Delete
    3. Make sure you don't delete a needed ' in the code before or after any of the url's

      Delete
  33. Impressive!!! The easiest solution I have found for implementing this effect. Thank you so much!!

    ReplyDelete
  34. This was super helpful! Thanks so much!!

    ReplyDelete
  35. I am not sure if you are still helping people but I am at a loss as to why this is not working on my Blogger site! I have tried everything. At first it appears but when I go to hover over the image it disappears! If I have two in a row only the one that I hover over disappears and then when I hover over the second one it disappears. It is driving me insane. :/

    ReplyDelete
  36. Thanks for great tutorial. I've searching this for very long time. I really want to replace my ordinary text link into something else. Can't wait to try it.

    ReplyDelete
  37. sir it is not working for my blog.when i used code it shows nothing on images and a bos of broken image appears .pls help me sir.

    ReplyDelete
  38. Hi! Is there any chance you could put 2 different rollover spots in 1 image? Please let me know!

    ReplyDelete
  39. Thank you so much for this, I've been using it a lot on my site!

    ReplyDelete
  40. hi.
    Why is the image after look like an x?
    The first image is ok, but second turned into an x.
    please help.
    many people asked as well.

    ReplyDelete
  41. This is very useful for my blog,http://guessthemoviequote.blogspot.com/. Thank you so much Paul.

    I do have one question, though. Say I have a link and I want the image to appear on a fixed area of the blog, then I want the fixed image area to change every time I mouseover to a different link. Would that be possible?

    ReplyDelete
  42. You rock! I'm no computer expert, so a lot of tutorials on this were hard to follow--yours is explained beautifully and was working in less than a minute. Thanks!

    ReplyDelete
  43. Ver useful post really i like it

    ReplyDelete
  44. I have been strugling to achive this using CSS and JavaScript!

    Thanks for the easy and straight forward HTML code!

    ReplyDelete
  45. ohhhhh yeah. worked in 1 sec. no prob! :)xxx

    ReplyDelete
  46. Can I just add that if you put height and width dimensions into it all the images will be the same size: e.g.

    img src="media/map1.jpg" height=”580” width=”823” onmouseover="this.src=’media/map2.jpg’" onmouseout="this.src=’media/map1.jpg’"

    Thank you

    ReplyDelete
  47. Thank you very Much !!!

    ReplyDelete
  48. There is a delay when I rollover and the image loads for the first time. This doesn't happen here but does on my webpage. Is there any way of fixing this delay as it doesn't look smooth?

    ReplyDelete
  49. Such a nice info, thank you very much for sharing this post.

    ReplyDelete
  50. thanks buddy for this valuable info..... :)

    have a good day... :)

    ReplyDelete
  51. Francis, thanks for this nice and simple code. I used to put a large javascript code for image hovering. Thanks again.

    ReplyDelete
  52. Thank you very much.
    :)

    ReplyDelete
  53. You have no clue how much you helped. I first tried making a swf file to use for a hovering effect but it covered up the link. I'm in web design 1 and I like to further out from everyone so instead of making text links, I made pictures to use for the navigation links.

    Thanks, I will definitely be looking at more tutorials on this website.

    ReplyDelete
  54. thank you it working properly

    ReplyDelete
  55. Thanks. Fantastic post

    ReplyDelete
  56. Many thans from me too, great and easy trick to set!
    Cheers!

    ReplyDelete
  57. Thank you very much for sharing this.

    ReplyDelete
  58. great example. Thanks.

    ReplyDelete
  59. Thank you, works just perfect :)

    ReplyDelete
  60. Thanks for solving my problem thru this helpful forum. I appreciate.

    ReplyDelete
  61. Hi, I've added the code and followed the instructions. Though the first image appears, the second does not when I hover over it. Any help from anyone that may know the solution to this. Thanks!

    ReplyDelete
  62. It was really needed. I want this trick of image changing on my blog.

    ReplyDelete
  63. After struggling with sprite css roll over images for the last two days, I am so thankful to have found this. It worked!! THANK YOU THANK YOU THANK YOU

    ReplyDelete
  64. Thanks for this one! May I ask another question? How can I do something like on your navigation bar, the one entitled "categories." Showing onmouseover on a certain text/image?

    ReplyDelete
  65. Does this function work the same when using an image map?

    ReplyDelete
  66. I'm in tears. You saved my final project in web authoring class! Thank you thank you thank you!

    ReplyDelete
    Replies
    1. Wow, I'm glad we could help with your class !

      Delete
  67. Thanks for code...I used this code and it works successfully but i have one problem.... i want to give two images in one link and both images will change on hover at the same time when i move cursor on link.....????? waiting 4 your help with code.......

    ReplyDelete
  68. Its working thanks.. Actually I want, initially no should should be there.. only text and when you hover mouse on text then only image should be shown. Can you please help??

    ReplyDelete
  69. Thanks a lot gentleman... you are a true legend... keep posting innovative ideas and soon i'll be posting my programing codes on ur blogging site...Thanks :)

    ReplyDelete
  70. very nice .thanks for this

    ReplyDelete
  71. cool I like that I dont have to log in to comment! mouse over code was the best of many sites!

    ReplyDelete
  72. Thanks it saved my efforts to put in more code :)
    Great Tip

    ReplyDelete
  73. Superb! This is the best code I got on the web. Others were too complicated to understand. This is plain, simple and effective. Thanks!

    ReplyDelete
  74. Thanks for the great and simple tutorial!!

    ReplyDelete
  75. awesome! but i have a problem though, the rollover image stays there even when i'd removed my cursor. some are stuck while other icons work perfectly well. please enlighten me!

    many thanks :)

    ReplyDelete
  76. I have the same issue as the previous commenter.

    ReplyDelete
  77. you are the greatest thank you very much

    ReplyDelete
  78. shit!!!...u a life saver..cnt belive u js mad this look so easy..and t wrks perfct!!

    ReplyDelete
  79. just great! but tell me how i can copy first image. :)

    ReplyDelete
  80. I have spent about 12 hours trying to do thins and for some reason when I put the mouse over it works fine but when the mouse is off its still the rollover colour. But this code works perfectly THANK YOUUUUUUU!!!!

    ReplyDelete
  81. This is the most straight-forward code I've found for roll-over image links. THANKYOU!

    ReplyDelete
  82. THANK YOU SO MUCH! I was about to use a complicated css until i found this :D

    ReplyDelete
  83. Thank you for sharing your wealth of knowledge, this is the simplest rollover effect I've ever seen!

    ReplyDelete
  84. I have a text next to the image. How can you make it that when visited it stays on a different colour, in order to spot the page I'm on?

    ReplyDelete
  85. Not work with WP Blog, Please Help...

    ReplyDelete
  86. OH THANK YOU!!!!! All I could find was css stuff that changed my entire blog information. I knew it had to be simpler than all of that! Thank you for supplying an easy and simple way!!!

    ReplyDelete
  87. Nice tip, anyone feels it is slow a little bit.

    ReplyDelete
  88. Very nice, simple and straight to the point. Cheers
    Vietnamrum

    ReplyDelete
  89. Hi,
    I can get the fist image and the link working fine but nothing happens on rollover. i've tried using externally hosted (imgur) images and also trying to link to images saved within files/theme/[...] but no matter what, I still can't get the second image to appear.

    Where am I going wrong?

    ReplyDelete
    Replies
    1. upload your images in weebly and copy the target from there (right click on image)..
      check that the code is the right one without mistakes:



      tell me if it helped.......

      Delete
  90. This comment has been removed by a blog administrator.

    ReplyDelete
  91. I think I love you!

    ReplyDelete
  92. Thankyou so much! I have been trying to figure this out for ages and this is the only tutorial that has worked. I appreciate this so much! :)

    ReplyDelete
  93. You just made my wasteful agonizing three days feel so much better. This should be the number 1 webpage that pops up for mouseover effect. Originally posted in '09 and still going strong. Thank you so much

    ReplyDelete
  94. Thanks this is the best, I like the KISS part fits me well. A question is it possible to have two or more pics roll over. I mean pic A rolls into pic B which then after 5 seconds rolls into pic C. The "notify me" box is gone

    ReplyDelete
  95. Some simple image hover effects samples...Image Hover

    Ling

    ReplyDelete
  96. Hi,

    I am using this in an email, and it looks great in the preview - obeys the code and does the rollover… but when I send it to email addresses it doesn't roll. Thoughts anyone?

    ReplyDelete
  97. Thank you, I've seen several people suggest how to achieve this, but yours has explained nice and easy. Adding the code as you have makes it really helpful. THANK YOU :o)

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us