Welcome to WebmasterWorld Guest from 34.238.194.166

Forum Moderators: not2easy

Message Too Old, No Replies

Imagemaps- area: hover

Is this just slow browser adoption?

     
11:37 am on May 20, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 19, 2003
posts:165
votes: 0


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?

2:49 pm on May 20, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Feb 29, 2004
posts:70
votes: 0


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
7:08 pm on May 20, 2004 (gmt 0)

Full Member

10+ Year Member

joined:Dec 10, 2001
posts:254
votes: 0


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>

2:45 pm on May 28, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:Nov 19, 2003
posts:165
votes: 0


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...