Links with Images showing on hover

Here it is, the finished code. Works for me on both FF and IE6. The only problem with it is that in IE the links have some sort of background color. If you erase the coloring the code wont work. I have no clue why, as I just started messing with CSS 2 days ago. If you are going to use it I would only recommend changing the color values, since so far if you leave them blank the code fails. You can change all the coordinates to your liking, that doesn't seem to give a problem.

Also, do not delete the z-indexes. Change them to match your layout if it uses them. If you leave them out when your layout uses them the code wont work right in FF

Well, that is all I can think of, good luck :)

<style type="text/css"> .links {position: absolute; top: 555px; left: 500; width: 200px; height: 700px; font: 16px Verdana, sans-serif; z-index: 2;} .links a {display: block; text-align: left; font: bold sans-serif; padding: 1px;border-width: 0; text-decoration: none; color: FFC; background: 444; z-index: 2;} .links a:hover {color: 411; background: AAA; z-index: 2;} .links a img {height: 0; width: 0; border-width: 0; z-index: 2;} .links a:hover img {position: absolute; top: 45px; left: 97px; height: 100px; width: 100px; z-index: 2;} </style>

Cool, but do you know how to do the reverse? I have an image on my blog linked to a different site and I'd like to have TEXT show when you rollover the image so that users know where they are being re-directed. I need it for blogger!! Help!!

I'm very interested in this, can somebody explain it better? Does this work for myspace? How would I create a list of links that show a popup image when you hover them? HALP

look my profile..
using firefox or ie look same effect..
no different like your example..
im edit very well..
thanks again!!

*nods*. sexy.

"The only problem with it is that in IE the links have some sort of background color."

I changed the background color into "transparent" - on my myspace profile it works fine :)


but now the next problem - instead of text I wanna have an image which you can hover and a bigger image appears...
is that possible???

its really works guys..
check out my page..
www.myspace.com/azril_ izam

Thanks Wasney!!

not work for meh T^T !!

dOPE :D..tHANX

works great. i was messing with the positioning and got what i wanted. =]

actually ive tried this and it dont work.....

can you give more details because i put the first code in the ABOUT ME section, and the second code ANYWHERE i want it to show, but it dont work for me.

View all »

Author	Wasney
Submitted on	Jun 10, 2007
Page views	53,578
Favorites	131
Comments	12
Reviewer	digitalfragrance
Approved on	Jun 12, 2007

hover, image, navigation, links, friends