IE shows Image Map cut out shapes when clicked

[Novice2010]

This is one of those aesthetics annoyance.

I have an image map, unfortunately, IE shows the cut out shape when the areas mapped out or hot spots are clicked.

So if I have a square hot spot, IE shows the cut out square when the area is clicked.

Any idea how I can removed this annoyance?

Thanks everyone!

<p>
<img src="../design/Koalav1a.jpg" width="600" height="450" usemap="#koala" alt="Koala" class="removeBorder" />
<map id="koala">

<area shape="poly" coords="105,190,63,148,48,120,63,84,79,63,105,42,148,16,211,6,253,27,281,60,253,97,232,127,220,148,203,181,198,202,148,218,127,204,105,190" href="javascript:void(0)" title="Koala Ear" alt="Koala Ear" onmouseover="writetext(koalaEar);" 
onmouseout="defaultMsg();" />


<area shape="poly" coords="212,224,213,218,217,213,222,209,228,208,234,209,239,213,243,218,244,224,243,230,239,235,234,239,228,240,222,239,217,235,213,230,212,224,212,224" href="javascript:void(0)" title="Koala Eye" alt="Koala Eye" 
onmouseover="writetext(koalaLeftEye);" onmouseout="defaultMsg();" />


<area shape="poly" coords="255,251,267,230,292,216,318,230,333,264,325,288,318,314,313,336,300,342,297,344,276,343,265,342,255,336,243,330,242,326,234,314,244,288,255,251" href="javascript:void(0)" title="Koala Nose" alt="Koala Nose" onmouseover="writetext(koalaNose)" onmouseout="defaultMsg()" />


<area shape="poly" coords="264,379,255,371,251,365,239,336,255,346,276,350,305,347,327,338,316,364,295,377,296,379,291,378,285,379,274,379,273,380,270,379,267,379,264,379" href="javascript:void(0)" title="Koala Mouth" alt="Koala Mouth" onmouseover="writetext(koalaMouth);" onmouseout="defaultMsg();" />


<area shape="poly" coords="353,225,266,206,244,199,209,197,221,168,248,123,264,102,277,82,291,61,359,71,431,80,436,96,438,112,432,123,429,135,445,184,435,219,400,228" href="javascript:void(0)" title="Koala Head" alt="Koala Head" onmouseover="writetext(koalaHead);" onmouseout="defaultMsg();" />
</map>
</p>

[xhtmlcoder]

Personally I cannot see that effect perhaps you have some scripts running in the background effecting things.

I assume you mean it highlights and focuses on the area region like when you TAB key through the image map.

[Stevie_D]

@Novice2010

This is one of those aesthetics annoyance.

I have an image map, unfortunately, IE shows the cut out shape when the areas mapped out or hot spots are clicked.

So if I have a square hot spot, IE shows the cut out square when the area is clicked.

Any idea how I can removed this annoyance?

The problem is that removing it makes it much more difficult (if not impossible) for people using the keyboard to find their way around your site, because when they get to the image map, as they tab around it there’s no visual indication which bit they are focused on. It’s generally accepted that, as the outline only appears between the user clicking on the map and the new page loading, the benefits of making it keyboard accessible and giving the user reassurance that they have clicked on the right bit far outweigh the aesthetic downside.

[system]

Calling an accessibility aid for those who don’t use the mouse or use keyboard and mouse an “annoyance” shows you are ONLY thinking of screen users – though using a image map in the first place is not just a trip in the wayback machine to the 1990’s, it smells like throwing accessibility completely out the window.

Though ANYTHING we say here without seeing the image or the site it is on is ENTIRELY a wild guess.

But as a rule, IMHO image maps == /FAIL/ at web design. It might be all artsy and pretty, but generally it’s a miserable failure at accessibility and usability… ESPECIALLY since you seem to have your ‘accessibility’ parts tied to javascript.

There’s a reason you don’t usually see that on websites in the first place!

[xhtmlcoder]

Off Topic:

I’d assume it is supposed to be displaying the anatomy of a Koala via an interactive image.

[Novice2010]

@deathshadow60

Calling an accessibility aid for those who don’t use the mouse or use keyboard and mouse an “annoyance” shows you are ONLY thinking of screen users – though using a image map in the first place is not just a trip in the wayback machine to the 1990’s, it smells like throwing accessibility completely out the window.

Though ANYTHING we say here without seeing the image or the site it is on is ENTIRELY a wild guess.

But as a rule, IMHO image maps == /FAIL/ at web design. It might be all artsy and pretty, but generally it’s a miserable failure at accessibility and usability… ESPECIALLY since you seem to have your ‘accessibility’ parts tied to javascript.

There’s a reason you don’t usually see that on websites in the first place!

Maybe I should have explained further. This page is not for real worlds use. It is a tutorial specifically about creating hot spots on an image.
I personally understand the the importance of accessibility with web pages in general.

Also I do not plan to use image map now or in the future, however, if a client wanted an image with hot spots on it then I can say, I know how to do it.

But I understand and respect where you are coming from.

Thanks for the input.

Novice

[Novice2010]

@Stevie_D

The problem is that removing it makes it much more difficult (if not impossible) for people using the keyboard to find their way around your site, because when they get to the image map, as they tab around it there’s no visual indication which bit they are focused on. It’s generally accepted that, as the outline only appears between the user clicking on the map and the new page loading, the benefits of making it keyboard accessible and giving the user reassurance that they have clicked on the right bit far outweigh the aesthetic downside.

Very true, because this was a specific project, I did not do that.

If I was making an image map for personal use, I would create a visual effect that tells the user what area on the image is active.

But as I mentioned, this isn’t a real world project, it is about making parts of an image active.

Good points.

Novice