Make A Rollover Image Effect - Image Changes On Hover


Posted : Thursday, October 29, 2009 | Post Author : Paul Francis | Categories: , , 94 comments

HTML LOGO
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 differant 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 how 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 and 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 when your cursor hovers over it.
Example : http://i941.photobucket.com/albums/ad259/spiceupyourblog/Blogger-2.png

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

Another Cool Effect For Your Images Is The Opacity Blurred Hover Effect Check It out.

Drop Your Comments And Questions Below.


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

Stay Connected With Free Updates

Subscribe via Email

94 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

  17. 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

  18. @ 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

  19. 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

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

    http://www.kjlovesphotography.blogspot.com

    Bright blessings,
    Kathy

    ReplyDelete

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

    ReplyDelete

  23. 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

  25. 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

  26. 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

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

    ReplyDelete

  28. THANK YOU! Saved my coding-incompetent butt haha

    ReplyDelete

  30. Helllo nice job

    ReplyDelete

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

    ReplyDelete

  32. Thank a lot worked great!!!

    ReplyDelete

  34. 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

  35. 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

  36. 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

  37. 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

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

    ReplyDelete

  39. This was super helpful! Thanks so much!!

    ReplyDelete

  40. 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

  41. 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

  42. 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

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

    ReplyDelete

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

    ReplyDelete

  45. 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

  47. 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

  48. 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

  49. Ver useful post really i like it

    ReplyDelete

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

    Thanks for the easy and straight forward HTML code!

    ReplyDelete

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

    ReplyDelete

  54. 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

  55. Thank you very Much !!!

    ReplyDelete

  56. 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

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

    ReplyDelete

  58. thanks buddy for this valuable info..... :)

    have a good day... :)

    ReplyDelete

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

    ReplyDelete

  60. Thank you very much.
    :)

    ReplyDelete

  61. 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

  63. thank you it working properly

    ReplyDelete

  64. Thanks. Fantastic post

    ReplyDelete

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

    ReplyDelete

  66. Thank you very much for sharing this.

    ReplyDelete

  68. great example. Thanks.

    ReplyDelete

  69. Thank you, works just perfect :)

    ReplyDelete

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

    ReplyDelete

  72. 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

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

    ReplyDelete

  74. 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

  76. 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

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

    ReplyDelete

  78. 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

  79. 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

  80. 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

  81. 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

  82. very nice .thanks for this

    ReplyDelete

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

    ReplyDelete

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

    ReplyDelete

  86. 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

  87. Thanks for the great and simple tutorial!!

    ReplyDelete

  88. 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



Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name (You Know Who You Are).

Subscribe to: Post Comments (Atom)