Imagemaps- area: hover

Is this just slow browser adoption?

[R1chard]

OK, I've got the following in the stylesheet in the head:

area:hover {background: #cccccc; color: #0099ff; border: solid 1px #993366}

and the following in the body:

<img src="face-grid.png" width="128" height="68" alt="Please ensure this grid has loaded properly (4802 bytes)" usemap="#char-select" border="0" name="select">

<map name="char-select">
<area shape="rect" coords="1,4,32,35" title="Ryu" href="ryu.html">
<area shape="rect" coords="32,3,63,36" title="Honda" href="honda.html">
-other areas-
<area shape="default" nohref>
</map>

I'm not interested in using Javascript with alternate images to do this, and to be honest I'm not bothered who can and can't see it- I just want a border to appear when the mouse/keyboard focus passes over the target area, and I want it to be concise valid markup.

But I'm not getting any effect on the areas with any browser. Presumably this is standard stuff, and if so, does anybody know why the compatibility is so bad? If it's not standard, then is there a workaround using extra <a>s?

[aeve]

I don't have any experience with image maps, but your problem is probably that ie only supports :hover on anchor elements.

One solution to your problem would be positioning anchors over a background image. There are a couple of articles in ala that go into details and it's discussed a little in this thread: [webmasterworld.com...]

css:

#map {position: relative; height: 68px; width: 128px; background: url(face-grid.png) no-repeat; list-style: none; }
#map a {position: absolute; width: 30px; height: 30px; display: block; }
#map a:hover {background: #cccccc; color: #0099ff; border: solid 1px #993366}
#ryu {left: 1px; top: 4px; }
#honda {left: 32px; top: 3px; }

html:

<ul id="map">
<li><a title="Ryu" href="ryu.html" id="ryu"></a></li>
<li><a title="Honda" href="honda.html" id="honda"></a></li>
...
</ul>

or something like that (I'm not sure I'm understanding the coordinates of the map).
Adam

[bruhaha]

First, I'd get rid of the traditional imagemap and stick to typical stylesheet stuff (div's, id's, etc).

The main thing you need to do is to position your main image as a background image for a block (the div "map" in the example below), and place your set of links inside it.

Note that the text links will be visible. Assuming you don't want that, place them within a further tag (<i> in this case) whose visibility is set to zero. Position the links in relation to the upper left corner of your "map" (from "top" and "left"), and set the height and width to mark the area each to be 'boxed' by your border.

The code might read something like this:

CSS:
#map {
background-image: url(face-grid.png);
height: 68px; width: 128px;
position: absolute; top: 100px;
}

#map a {
position: relative;
}

#map a:hover {
border: solid 2px #936;
}

#map a i { visibility:hidden; }

a#Ryu { height: 20; width:35; top:20px; left: 0px }
a#Honda { height: 20; width: 35; top: 20px; left: 60px }
---------------
HTML:
<div id="map">
<a href="ryu.html" id="Ryu"><i>Ryu</i></a>
<a href="honda.html" id="Honda"><i>Honda</i></a>
</div>

[R1chard]

Thanks everyone.

I guess I knew IE wouldn't work, but I'm not really bothered if it doesn't. I would have expected one browser or another to work with the fancy display, though. I just wanted to know if the short area:hover{ was valid, and it appears that it isn't.

I'll look into some of those examples. Thanks for the links. To be honest they look a little long, plus the image will be lost in all version 3 and some 4 browsers (actually, I believe my code would work in Netscape 2, or any any modern browser if CSS is turned off), but if that's the correct way to do it...