Help with image on link hover

Forum Moderators: not2easy

Message Too Old, No Replies

Help with image on link hover

Deep_Woods

5:44 pm on Mar 3, 2005 (gmt 0)

Okay..I am very, very new at CSS..so try to tolerate my ignorance thru this question...;^)

I purchased a book on css and do have a better understanding of css now, but I still can't figure this out.....

I have built a css page and it looks fine in IE6....What I want to do is have a small icon/image to show up on the list links at hover. I would like the text to stay the same, just have the small image/icon show up to the left side of the link on hover.

I am not looking for someone to do this for me, just an example or reference if it can be done.

Thanks for any advice or help.

kpaul

5:53 pm on Mar 3, 2005 (gmt 0)

google "css rollover image span div visibility tutorial"

those are the keywords in your quest ;)

-kpaul

yowza

5:58 pm on Mar 3, 2005 (gmt 0)

If you Google "listmatic" and follow the first result you will see what is probably the best online source of list navigation examples. There a few that you could reverse engineer to figure out how to do it.

createErrorMsg

9:43 pm on Mar 3, 2005 (gmt 0)

Here's a test page for you play around with. You'll need to add your own path to the image you want to use in the background property and will need to tweak the padding to get your spcing right, but this will get you started. I've indicated the necessary CSS properties in red. These are the essentials to making the list and the hover effect work. The rest of the CSS is purely presentational.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body{
font: 80%/1.7 Tahoma, Verdana, sans-serif;
}
*{ /*This sets all padding and margins to zero. It's not strictly necessary, but you WILL have to set all the applicable margins and padding on the <ul> and <li>s to zero*/
margin:0;
padding:0;
}
#nav{
width:100px;
background:#789;
}
ul{
list-style-type:none;
}
ul li{
display:inline; /*Fixes the IE Whitespace in Lists bug*/
}
ul li a{
display:block;
padding-left:25px; /*WIDTH OF IMAGE - clears space for the image to show*/
color:#fff;
text-decoration:none;
}
ul li a:link, ul li a:visited{
background: none;
}
ul li a:link:hover, ul li a:visited:hover{
background: url(images/arrow.gif) no-repeat left center;
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
</ul>
</div>
</body>
</html>

cEM

Deep_Woods

10:30 pm on Mar 3, 2005 (gmt 0)

Thank folks...I got some good ideas from the suggestions. I am working on the code now, when I get it like I want it to look I will paste the code here and you all can evaluate my practice work ;^)

Thanks again and have a good day.