Posted by Steve Pugh on 02/01/74 11:46

"Jaxtraw" <jax@knickersjaxtrawstudios.com> wrote:

>I'm going barmy with an image map. I can't seem to get IE 6 (version
>6.0.2800.1106) to recognise the default "shape". It just ignores it. Here's
>my code-
>
> <IMG id="groupShot" src="meetthecrew2.jpg" usemap="#meetthecrew2.jpg"
>width="700" height="337" border="0" alt="Lucy And The Crew">
> <map name="meetthecrew2.jpg">
> <area shape=poly
>coords="167,335,167,323,155,316,151,210,140,103,142,46,107,16,82,26,69,69,60
>,100,45,122,21,176,6,216,10,233,49,259,64,276,53,301,49,336"
>onclick="javascript:showPopDiv('pfuff')">
> <area shape=poly
>coords="300,336,296,246,289,128,269,117,285,98,295,67,279,33,249,26,222,56,2
>19,81,207,111,191,115,181,141,172,164,168,171,167,209,163,247,158,288,166,31
>8,176,336" onclick="javascript:showPopDiv('lucy')">
> <area shape=poly
>coords="310,335,306,271,313,217,319,196,313,175,325,156,332,122,339,50,352,3
>5,379,34,396,60,405,97,412,129,427,139,428,165,434,194,433,125,465,114,465,1
>30,450,141,438,244,427,336" onclick="javascript:showPopDiv('sephone')">
> <area shape=poly
>coords="446,335,442,318,458,287,487,275,509,281,514,270,505,237,479,229,469,
>207,480,183,507,175,538,175,549,189,563,200,571,241,581,275,614,290,623,323,
>621,336" onclick="javascript:showPopDiv('todger')">
> <area shape=poly coords="611,189,537,136,499,45,496,0,699,0,699,123"
>onclick="javascript:showPopDiv('alienne')">
> <area shape=default onclick="javascript:showPopDiv('default')">
></map>

All your area elements are missing the mandatory alt attribute.

>The reason I'm using onclick is that IE, and IE alone, insists on drawing
>phenomenally ugly "borders" around the shapes when they're clicked and

Those are used by users who use the keyboard rather than the mouse to
navigate the site. They are an important acessibility feature.

They can also be quite useful for all users, especially with complex
maps with small regions it's useul to have some indication that you've
clicked where you wanted to click.

>onclick seems to avoid that... but I have the same problem if I use hrefs.
>
>The javascript is there to make an invisble div visible- you click on the
>pic and the div pops up with some info on what you've clicked.

What happens for users who have JS disabled?

>Anyway, this works fine in Opera and Firefox, but nothing I've tried with
>"default" works in IE. All the other shapes work fine in all the browsers,
>including IE.

If no other solution presents itself, you can always replace
<area shape=default>
with (and this must go last in the list of areas)
<area shape="rect" coords="0,0,700,337">

The two are functionally identical. Browsers read down the list of
areas and apply the first one that matches a given click, so in the
case of overlaps one specified at the end of the list like this would
only be used if no previous region had been used.

Another suggestion would be to move your default onclick out of the
image map and onto the image itself. You may need to rework your
script to take event bubbling into account.

However, once you've worked out what's going to happen for users with
no JavaScript this whole problem may simply go away...

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net> <http://steve.pugh.net/>

[Back to original message]