Client-Side Image Map help - DEFAULT coordinates

[donishere]

I'm trying to do a fairly simple client-side image map. The two rectangle areas are working fine but the DEFAULT area is not working.

<map name="map1" id="map1">
  <area shape="rect" coords="107,72,168,90" href="[URL unfurl="true"]http://www.link1.com"[/URL] target="_blank" alt="1984">
  <area shape="rect" coords="174,70,233,90" href="[URL unfurl="true"]http://www.link2.com"[/URL] target="_blank" alt="2002">
  <area shape="default" href="/">
</map>

Did browsers stop supporting DEFAULT in image maps?

 

[rpgfan3233]

Do you have to specify coords for it? I've never used it, so I'm not sure.

 

[donishere]

Coords aren't needed for the default shape. The default shape is defined as any area not already defined. It's the same as the Else block of an If-Else statement.

 

[Vragabond]

I have tested your example in my three browsers and Mozilla and Opera experienced no problems with it (default worked nicely) while IE choked. With or without a doctype. Looks like Redmond guys have done it again.

 

[BillyRayPreachersSon]

I've not tried this, but as a possible hack-solution, put an anchor element around the image, with an href of the default, and then hope that the image map coords will overrite specific areas.

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[donishere]

BillyRay...:

I tried that. While IE did know that the image had an anchor element, nothing happened when I clicked on it.

<a href="/"><img src="logo.gif" usemap="#map1"></a>

Still no solution.

I just can't believe that no one has noticed this yet in IE.

 

[BillyRayPreachersSon]

Did you remove the default shape?

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[donishere]

I tried with the default shape left in and the default shape taken out.

Both didn't work.

 

[rpgfan3233]

Try this link out: [link]http://www.blooberry.com/indexdot/html/tagpages/a/area.htm#peculiar[/url]

It may help to explain the cause for this problem.

 

[donishere]

Rpgfan:

Thanks. Looks like it is just IE with this problem.

Can anybody suggest any other workarounds?

 

[Xaqte]

Don't know if I'm shooting in the dark, but you can find a nice image map here:

http://www.stunicholls.myby.co.uk/menu/mantis.html

 

[ChrisHunt]

According to the spec, if two <area> elements intersect, the <area> declared first take precedence. So try changing the last area you define from a "default" to a "rect" covering the whole image - since it's last in line, it should only get picked if the user hasn't clicked in one of the other areas.

Of course that all depends on Microsoft following that standard...

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[rpgfan3233]

Try this:

<img src="screen-euc.gif" usemap="#map1" style="cursor: hand" onmouseover="window.status='[URL unfurl="true"]http://www.yourDomain.com'"[/URL] onmouseout="window.status=''" onclick="window.location='[URL unfurl="true"]http://www.yourDomain.com'">[/URL]

That's specifically for IE. Then, use the DEFAULT <area> like you had it to make it work in other browsers (without this, it won't work properly). This should work if IE users have scripting turned on (probably 99% of casual IE users do). This is the only way I could find to make it work.

I hope this helps!