Posted by Jaxtraw on 10/19/51 11:46

Steve Pugh wrote:
> "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.

I do housekeeping like that once the functional HTML is complete.

>> 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 only show in IE and they ruin the look of the thing. Image maps are an
eye candy feature, and like anybody sensible I'd never use one for important
navigational purposes. That's a job for text links.

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

Not applicable in this case. If you've clicked, the DIV pops up.

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

It doesn't work. Like many many sites whose tricksy DHTML menus don't work
for non-scripting visitors. The difference here is that it's not an
essential navigational tool. Which, by the by, is why I never use plugins
like Flash since I guess many people, like me, keep the annoying things
switched off unless they specifically want them on for a particular site.

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

Thanks for the advice :)

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

To script or not to script is just one of those questions. Like I said, I
never use javascript for essential site navigation. This is an extra feature
that just makes things a bit more interesting for those who have it. If you
want things to be even slightly dynamic on a page, sadly it's unavoidable.

I don't like javascript. I'd prefer that browsers have something more
limited that all users can trust to leave working; an integral DHTML
manipulation markup/language rather than the rather too broadly specced
javascript. But we don't have that, so I'm making do with what there is.

Look on the bright side, at least I'm not the kind of buffoon who makes
their links out of java applets or puts essential navigation menus in
javascript that only works in IE and Netscape 4.

Ian

[Back to original message]