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
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.
http://facebeek.googlepages.com/CopyofRssspotlight.png
- Next, search for this line below and replace it with another image.This image should be the image you see when hovering over.
http://facebeek.googlepages.com/Rssspotlight.png
- Search for this line of code and replace it with your own destination url.
http://feeds.feedburner.com/widgetsforfree
- 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.
nameyourimageThat's all the steps necessary! If you have any questions please comment below. replace image on hover,
Subscribe in your preferred RSS reader:
Subscribe RSS Feed 
30 comments:
John,
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.
thanks!
Jeeberman,
All you need to do is take out this line of code below. Then you will have a regular image without a destination url.
http://feeds.feedburner.com/widgetsforfree
this website f***ing ROCKS! thank you! :D
I Had added that Widget to my blog but the image does not seem to change when I hover...wats wrong
http://hacksdaily.blogspot.com/
You have one hell of a blog...Keep it up..
@Shadow,
Did you put the code in an Html/Javascript Pageelement?
This code works for my other blogs, so I think it should work for you as well.
You could also try renaming the image(learn how to do this in the last step up above)
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...
I got it right I had put that code in other html widget so I was not getting it...nyz thanks..
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..
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 :(
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 :(
Could it be myspace ?
WOW! This has been more than helpful! Thanks a TON! :]
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???
Aloha!
thank you so much for this code! you are awesome! :) HUGGSSS
i added the code but the hover does not work. can you please let me know why that might be?
www.myspace.com/sydtribute
(for the "buy cd now" button)
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 http://myspace.com/krazykrit3
i dnt understand how to do it... its sayings stuff about the three lines idk what that means
i used the coding, it works and all, but blogger doesnt allow more then rollover image... what wrong???
http://monochromephoto.blogspot.com/
@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...
@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.
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. :)
myspace blocks this code from working
spam me kaythi18@gmail.com
Wow! Nice effect. I always thought you need to use flash to get this effect. I have flash blocked and it still works!
OK!
Finally I find a super easy and cool way to this effect. I am so thankful and I want you to know that. Thankyou.
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 :)
Great tip! Love the simplicity of it.
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.
Any fixes?
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.
Some help there?
Visit link: IMAGE HOVER OVER EFFECT
I was really looking for this effect.
All i say you is a BIG THANKS!
I'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?
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
Post a Comment