At 02:21 PM 5/23/2005, [EMAIL PROTECTED] wrote:
I could not figure how to get this effect best through only CSS so I had
to rely on the old Java roll over stuff.
Can anyone take a peek and give me a better alternative? Thanks.
(specifically reharding the roll over images on the Nav. I initially
wanted them to just show up as background images and was getting no where
between browsers).
http://www.calantiharassment.com/layout%201.htm
Adam,
What you're doing is totally easy with CSS, no JavaScript required. (It is
javaSCRIPT, by the way -- Java is a separate though historically related
language.)
One way is to toggle the background image on hover:
li a
{
background: url("inactive.jpg") no-repeat;
}
li a:hover
{
background: url("active.jpg") no-repeat;
}
However, Internet Explorer, with the wrong cache setting, will reload all
the images when you hover, causing an ugly mess. An alternative method is
often referred to as CSS Sprites after the ALA article by the same name
[1]. It involves putting both the active & inactive states in the same
image, stacking the vertically or horizontally, and simply changing the
background position on hover:
li a
{
background: url("menublob.jpg") left top no-repeat;
}
li a:hover
{
background: url("menublob.jpg") 0px 25px no-repeat;
}
I've found that I've had to repeat the background rule, and not use
background-position, to support Netscape.
Paul
[1]
CSS Sprites: Image Slicing's Kiss of Death
by Dave Shea
http://www.alistapart.com/articles/sprites/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
