Create Image Hover Over Effect
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,
Share!
Enjoy the article so far? Recommend it to your friends and peers.
Subscribe! (free)
Be the first to our articles and get latest updates on freebies.
60 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
very cool
firstly, this is very cool.
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
(the instructions for which can be found here:
http://tips-for-new-bloggers.blogspot.com/2007/08/horizontal-menu-navigation-bar.html)
however, when i replaced the image codes, my navigation bar went from being *horizontal* to being *vertical*.
any ideas on what went wrong or how i can fix it?
John, no homo, but I love you for all these tips
Thanks for information.
I will try :)
http://www.blogkaan.com
This was awesome information! I used it for my website:
http://jchauntedhouse.com
Awesome, I've always wanted to do this on my movable type blog. Never have been able to figure it out, though I've tried. I knew it could be this simple, thanks for showing us how.
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.
http://www.ourhangout.net
awsome
This worked out perfectly. I have been trying to figure this out for so long. Thank you so much for the great directions!
EXACTLY what I wanted! MWAH!
when ever i do this it works, but the when i click on the image it just refreshes my page, it won't take me to the site even after i enter the url
Dear John,
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
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
http://goalgalore.blogspot.com
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...Dating Tip
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.
Just awesome and so simple, many many thanks great friend you just made my blog really beautiful!
Where do I paste this code ??
In what section do I need to put the code ???
Can some on please put it step by step... THANX ! !
SUPER EASY TO UNDERSTAND! Awesome site! Thanks a million!
This is great!
Thanks a million.
Really easy to understand ~ did exactly as you said, but it simply wouldn't work :( ~ shame!
I am learning how to use the CSS hover/mouse-over technique and with tips from here have helped. Take a look.
http://www.quietone.co.uk
for some reason it's not working. the spotlight on your tutorial doesn't even change when hovered with mouse. only the text +- Create your own Rollover Image under the rss spotlight changes
it working.... i put on my site now
Great post. Very interesting!
Thank You!
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.
Thanks....
regards, saad from
Education
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.
What a stuff of un-ambiguity and preserveness of valuable know-how on
the topic of unpredicted feelings.
Here is my weblog ; legitimate work from home jobs
Hi it'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.
My site: piano lessons
It's amazing in support of me to have a web site, which is valuable for my experience. thanks admin
My blog ... old holborn
Post a Comment