|
Starhugger -> RE: Navigation buttons with rollover effects (3/24/2006 3:56:59)
|
Here's a sample of the code I wound up using. It works very nicely using only background images. There's no text in the link, the way I'm using it, but I'm sure it could be used, and I might still change it for that purpose, so that the SEs can see them. But for now I'm using a kind of glowing effect for the link text, so it looks best in graphics mode. The person I'm doing this for is mostly interested in a brochure type of site, not something that will make him world famous (yet). [;)] Each link uses its own set of the 3 style definitions below:
#home a.linkhome { /* DEFINE LINK ON ITS OWN PAGE */
display: block;
width: 128px;
height: 35px;
background-image: url("images/home3.jpg");
background-repeat: no-repeat
}
a.linkhome { /* DEFINE BASIC LINK ON ALL OTHER PAGES */
display: block;
width: 128px;
height: 35px;
background-image: url("images/home1.jpg");
background-repeat: no-repeat;
}
a:hover.linkhome { /* DEFINE HOVER LINK ON ALL OTHER PAGES */
background-image: url("images/home2.jpg");
}
I've used the Home page as the example above. As suggested by Tailslide, the #home linkhome applies to the Home button when it's displayed on the Home page, and it uses a greyed out image. On the Home page, the body is labeled id="home".
Then the HTML is simple:
<div id="leftnav">
<a class="linkhome" href="../index.htm"></a>
...etc...
</div>
Very simple, very straightforward. And it tests fine in IE6, FF, NN7 and Opera. In Opera it goes blank on the first mouseover, but shows up fine in subsequent mouseovers. That's the only problem I saw.
Starhugger
|
|
|
|
