Help a webbie out...

March 27, 2007 1:33 PM

CSS aid needed: I'm going to see a client tomorrow morning and I want to get this working before I see her. I have a horizontal rollover image menu, but I would like to have a different image to display when rolling over the link. [Single image demo] I've searched and tried the usual suspects, nothing that helps. Any code/suggestions/links ?
posted by Webbster to computers & internet (8 comments total)

I'm not sure I understand, you want a suggestion to replace the green flower thing(http://wearadinkra.com/images/lowercase_e.jpg)? Or do you not understand how your example works?
posted by signal at 1:43 PM on March 27, 2007

Confused as signal is. Do you actually know how to code CSS? The code is right there in your example's source, you just replace the green flower img url with another url, and give each li separate ID's...
posted by gramcracker at 1:46 PM on March 27, 2007

you could create a div that has the jpg as a background image, right?

so

.lowercase {
background-image: {'addressto/lowercase.jpg');
}

.lowercase#hover {
background-image: {'addressto/newlowercaseimage.jpg');
}

or instead of using divs... go with link specifications

.lowercase a {

.lowercase a:hover {
posted by phaedon at 1:47 PM on March 27, 2007

and yeah. it looks like the provision is in your code already *just noticed*
posted by phaedon at 1:49 PM on March 27, 2007

something like this? the padding is to make room for the flower image.

a:link, a:hover
{
padding-left: 30px;
}

a:hover
{
background: url("flower.jpg") no-repeast;
}
posted by grumblebee at 1:50 PM on March 27, 2007

i forget how to print out code here. but to expand on gramcracker, take a look at the li's inside the div id="hnav". you want to name these different using 'class' (or maybe id but i double it) so give them unique classes, like li class="something" then return to the stylesheet and create new property for that li class.
posted by phaedon at 1:53 PM on March 27, 2007

The single image CSS rollover relies on repositioning the image according to x and y coordinates (in pixels). So using a different rollover state simply requires producing the necessary graphic and recalculating those coordinates.

Then it's just a matter of dumping it all into the CSS. In practice it takes more code than an old school JavaScript rollover, but it degrades into a nice unordered list in the markup and provides some great accessibility benefits.

Perhaps you know all of this already. But I'm not quite understanding what your question is. Have you implemented the nav somewhere already and having trouble making it work? If so, you'll need to link to your work somewhere so we can debug it and figure out what the problem is.

The best tutorial on making it all work was produced by Dave Shea at A List Apart, and one of his examples might be helpful. You'll find additional examples to work from if you dig through Google a bit.
posted by aladfar at 2:03 PM on March 27, 2007

Definitely don't use :hover on a div, as it won't be supported in IE (which only acknowledges :hover as a selector for links). Unfortunately.
posted by Hildago at 5:15 PM on March 27, 2007