IE, Client Side Image Map, and Default Shape

[Jaxtraw]

Hi, hope this is the right ng for this question...

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>

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

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.

I thought IE5 had problems with "default" but that IE6 is okay with them. I
don't use image maps much and have never used "default" before- but I'd
really like this to work. If anybody has any suggestions they would be
gratefully appreciated!

Ian

--

 

[dorayme]

Hi, hope this is the right ng for this question...

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-

Be nice to have a url to see what is what.... How about a url
without any javascript (unlike the code you give)?

Perhaps you might find my experience helpful: when I used to make
more image maps than I do now, I was surprised to find that it is
quite effective to just use rectangular shapes in spite of the
irregularity of the actual bits you want ideally to capture.
People with mice are quite active and soon find the intuituive
centres of the appropriate features (like humans in a group pic).
This way at the very least, if borders appear they won't look too
bad. nd another thing, the rect coordinates are easier to make
and less prone to error.

As for borders, you should be able to turn such off with
appropriate css. Make sure that the hover specs do not specify
any borders at all, or better, specify no border.

You should have a doc type, if you use a strict type of modern
vintage, take out the border="0" from the img tag and reference
it from some css, like a class.

 

[Steve Pugh]

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

 

[Jaxtraw]

All your area elements are missing the mandatory alt attribute.

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

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.

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.

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

 

[Steve Pugh]

They only show in IE and they ruin the look of the thing.

People do use IE without a mouse.

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.

But is the content of the 'div popups' available in an other way?

I'd do something like this:

<area href="#foo" onclick="whatever(); return false;">

Then lower down the page:
<div id="foo">blah blah blah</div>
And only hide the div if the browser supports all the required JS for
the popups. Then the user without JS can still access the content
normally.

Steve