Create CSS Image Rollovers, Setup image Navigation using CSS rollover Options

[atshr]

Hi Everyone,

Would like to know how to setup image navigation using CSS rollovers.

Here is my HTML code:

<div>
<nav role="navigation">
<ul>
<li class="home"><a href="index.html"><img src="images/home.jpg" alt="logo" width="113" height="43" /></a></li>
<li class="myths"><a href="myths.html"><img src="images/myths.jpg" alt="logo" width="113" height="43" /></a></li>
<li class="truths"><a href="truths.html"><img src="images/truths.jpg" alt="logo" width="113" height="43" /></a></li>
<li class="video"><a href="video.html"><img src="images/video.jpg" alt="logo" width="113" height="43" /></a></li>
<li class="contact_us"><a href="contact_us.html"><img src="images/contact_us.jpg" alt="logo" width="113" height="43" /></a></li>
</ul>
</nav>
</div>


Here is my CSS code:

ul {
list-style-type: none;
}

li {
float: left;
position: relative;
right: -368px;
bottom: 97px;
}

a {
display: block;
width: 110px;
padding-left: 1px;
padding-right: 5px;
}


*/ The following information is where I'm having trouble trying to load the image buttons and there are two. The two image files I have are loaded in a folder title images and each image has a unique filename. The second image I also want it to be an active link */


li.myths {
background: url(images/myths-black.jpg);
}


li.myths a:hover img{
visibility: hidden;
}


Any timely advice to resolve this situation would be greatly appreciated.


atshr

[Frederiek]

Use the images as background-image. See http://css.maxdesign.com.au/listamatic/horizontal29.htm .

Or use a CSS sprite. See
http://css-tricks.com/css-sprites/
http://css-tricks.com/snippets/css/basic-l...-as-css-sprite/
http://www.smashingmagazine.com/2009/04/27...-and-tutorials/
http://wellstyled.com/css-nopreload-rollovers.html

And for the "active" (or actually "current") link, have a look here: http://www.impressivewebs.com/current-page-link-styles/

[pandy]

You could use inline images but then you need both images in the HTML source and then hide one or the other with display: none and switch on :hover. So this isn't a good option because it would look odd without CSS.