Create your own attractive Simple Rollover Buttons and Images. This will enhance your webpage dramatically. As you can see above is a beautiful example. Now hover over the image and you will see a new image being displayed. The image above is in black and white. When you hover over, a copy of the image in color is then displayed.

+- Create your own Rollover Image

Copy and paste the code below. The code should be placed wherever you would like the images to appear on your site.

Steps for Customizing Images and Destination URL
  • Search for this line of code. You will find this line twice. Replace both of these lines with your own image.

  • Next, search for this line below and replace it with another image.This image should be the image you see when hovering over.

  • Search for this line of code and replace it with your own destination url.

  • Now search for this line of code below. You will find this line three times. Replace all three lines with your own unique name for the image. This is important if you create more than one of these cool rollover images.


That’s all the steps necessary! If you have any questions please comment below. replace image on hover,

Like Us on Facebook?

  • Jeeberman

    John,<BR/>What do I do if I don’t want the image to have a url to go to? I want it so that when you click on the image nothing happens.<BR/><BR/>thanks!

  • widgetsforfree

    Jeeberman,<BR/>All you need to do is take out this line of code below. Then you will have a regular image without a destination url.<BR/><BR/>

  • Ivy

    this website f***ing ROCKS! thank you! 😀

  • ShaDow

    I Had added that Widget to my blog but the image does not seem to change when I hover…wats wrong<BR/><BR/><BR/><BR/>You have one hell of a blog…Keep it up..

  • widgetsforfree

    @Shadow,<BR/>Did you put the code in an Html/Javascript Pageelement?<BR/><BR/>This code works for my other blogs, so I think it should work for you as well.<BR/><BR/>You could also try renaming the image(learn how to do this in the last step up above)

  • ShaDow

    I have done what all you have asked for…the prob is the image changes for the first time you hover but it does not change back…

  • ShaDow

    I got it right I had put that code in other html widget so I was not getting it…nyz thanks..<BR/><BR/>I just wanted to know how you put "+- Create your own Rollover Image" in your blogpost..I was intrested in getting a same for my blog..

  • Christian

    hey, i’ve tried.. to see if this works with myspace.. so i could add some pictures onto my page.. but it seems i’m having no luck at all :(<BR/><BR/>the image stays the same (the gray one) the link works.. i tried it with the original code and also my own and yet it doesn’t work :(<BR/><BR/>Could it be myspace ?

  • Rocky O

    WOW! This has been more than helpful! Thanks a TON! :]

  • Chris

    My blog has a black background so the image has a white border. The effect works though. Any way of making it blend with a dark background???<BR/><BR/>Aloha!

  • Anonymous

    thank you so much for this code! you are awesome! 🙂 HUGGSSS

  • Anonymous

    i added the code but the hover does not work. can you please let me know why that might be?<BR/><BR/><BR/><BR/>(for the "buy cd now" button)

  • Anonymous

    I think there’s a lot of ppl that wanna know how to make it work on myspace, theres a bunch of codes to make this effect in ALL THE LINKING IMAGES but I wanna know how to make it in one or the one’s I want it to happen. someone knows????? Im designing a supercool website check n tellme any suggestions <A HREF="; REL="nofollow"></A&gt;

  • Anonymous

    i dnt understand how to do it… its sayings stuff about the three lines idk what that means

  • nHu.tRAn

    i used the coding, it works and all, but blogger doesnt allow more then rollover image… what wrong???<BR/><BR/>

  • John Smith

    @nHu.tRAnp, what you need to do is rename the title "nameyourimage". Read the last step and you should know what I’m talking about. It should work now. Let me know if it doesn’t work still…

  • John Smith

    @Chris,If your blog has a black background then you need to find another image to use.


    I did as you instructed with the code. I also renamed it. For some reason it only shows the 2nd image the mouse over one and not the standard image.

  • Taylor

    This is awesome man. Must be what John Chow does. I did something a little different on my blog because I could never find out how to do this. However, no i know. Thanks. 🙂

  • Anonymous

    myspace blocks this code from working

  • Anonymous
  • Narzuty

    Wow! Nice effect. I always thought you need to use flash to get this effect. I have flash blocked and it still works!

  • Emil

    OK!<BR/>Finally I find a super easy and cool way to this effect. I am so thankful and I want you to know that. Thankyou.

  • Jennie

    it works only for a single image, when i have multiple images up it doesn’t work anymore…what do i do? thank you for the code!! it’s awesome 🙂

  • Chris ~n~ Sonia

    Great tip! Love the simplicity of it. <BR/><BR/>I found the same thing as Jennie; it works fine for the first pair of images, but doesn’t work for any others after it.<BR/><BR/>Any fixes?

  • Julio Ferro

    I’m here to ask the same question. I’ve tried to create a kind of nav bar, but if you place more than 1 code, the rollover effect doesn’t work.<BR/>Some help there?

  • Sade

    Visit link: <A HREF="; REL="nofollow">IMAGE HOVER OVER EFFECT</A>

  • Anonymous

    I was really looking for this effect. <br />All i say you is a BIG THANKS!

  • Summer

    I&#39;ve gone over the code, changed all the image names, etc. and only one button of the 9 I have will perform the desired effect. Suggestions?

  • nurjaman

    i use recent post code of your…thanks very usefull. i am dummies but i have beautiful blog because of free source of blogging. once again thanks


    very cool

  • Megan

    firstly, this is very cool.<br /><br />i tried using the code for a hover effect image in place of the image coding found in the html for a horizontal navigation bar <br /><br />(the instructions for which can be found here:<br /><br /><br />however, when i replaced the image codes, my navigation bar went from

  • chilltime

    John, no homo, but I love you for all these tips

  • Kaan Akyıldız

    Thanks for information.<br />I will try :)<br /><br />

  • Anonymous

    This was awesome information! I used it for my website:<br />

  • Ed

    Awesome, I&#39;ve always wanted to do this on my movable type blog. Never have been able to figure it out, though I&#39;ve tried. I knew it could be this simple, thanks for showing us how. <br /><br />It took a little bit to figure out, and even if I take the initial link out, it still links to my homepage, but I could live with that.<br /><br />

  • Anonymous


  • Drew

    This worked out perfectly. I have been trying to figure this out for so long. Thank you so much for the great directions!

  • Elly

    EXACTLY what I wanted! MWAH!

  • Anonymous

    when ever i do this it works, but the when i click on the image it just refreshes my page, it won&#39;t take me to the site even after i enter the url

  • chanda mama

    Dear John,<br />First of all thanks so much for this tutorial, GREAT! Used it in my (horizontal) navigation bar, changed image address and url, however when I want to add the second navigation button it keeps coming underneath instead of next to the first one (on the right). Any idea how I could fix that (as far as I am concerned it is not in the HTML)? THANKS again, Chantal

  • César

    Hi, for some reason it worked with the first image and then I came back to my blog later and was not changing the color anymore, but the code is fine. :S <br /><br />

  • hastine

    If you know what you want in a partner, have been frustrated by your earlier attempts to find someone special and are ready to take the first step, an online dating service may be the right next step for you…<a href="; rel="nofollow">Dating Tip</a>

  • telugu songs free download

    thanks and it was really helpful for my blog. i was here through the search and i finally got it for what i am looking for.

  • Bbcversus

    Just awesome and so simple, many many thanks great friend you just made my blog really beautiful!

  • Herin Maru

    This comment has been removed by the author.


    Where do I paste this code ??<br /><br />In what section do I need to put the code ???<br /><br />Can some on please put it step by step… THANX ! !

  • Roberta Laliberte

    SUPER EASY TO UNDERSTAND! Awesome site! Thanks a million!

  • Tres Baum

    This is great!<br /><br />Thanks a million.

  • Caroline (Frogmum)

    Really easy to understand ~ did exactly as you said, but it simply wouldn&#39;t work 🙁 ~ shame!

  • hatredspirit

    I am learning how to use the CSS hover/mouse-over technique and with tips from here have helped. Take a look.<br /><br />

  • kaRL

    for some reason it&#39;s not working. the spotlight on your tutorial doesn&#39;t even change when hovered with mouse. only the text +- Create your own Rollover Image under the rss spotlight changes

  • mobile phone blog

    it working…. i put on my site now

  • resume service

    Great post. Very interesting!

  • Anonymous

    Thank You!

  • Saad Amir

    The images of every things seem to be very beautiful and nice.That peoples enjoy that things and this type of article has know very helpful for the student.<br />Thanks….<br />regards, saad from<br /><a href="; rel="nofollow">Education</a>

  • adam

    Just used this code, brilliant and it works great, however if you want to use this in a wordpress text widget to create social icons like i did, to prevent the images clumping together, add the style padding atrribute, for some reason hspace and the   attributes will not work.

  • Anonymous

    What a stuff of un-ambiguity and preserveness of valuable know-how on <br />the topic of unpredicted feelings.<br /><i>Here is my weblog</i> ; <b><a href="; rel="nofollow">legitimate work from home jobs</a></b>

  • Anonymous

    Hi it&#39;s me, I am also visiting this web site on a regular basis, this web site is actually nice and the visitors are actually sharing nice thoughts.<br /><i>My site</i>: <b><a href="; rel="nofollow">piano lessons</a></b>

  • Anonymous

    It&#39;s amazing in support of me to have a web site, which is valuable for my experience. thanks admin<br /><i>My blog</i> … <b><a href="; rel="nofollow">old holborn</a></b>