I just ran across something for the firs time this week on a website under construction with Contao v2.11.2. We've been using image maps for navigation links in header images (buttons etc.) where they make sense to use when a drop down navigation element is not the best solution.

The report was that in IE 9 and Chrome (current release), when the client clicked on the image map link, an outline appeared around the hot line map area. I use a desktop computer for development, and this is the first time I had heard of this as a problem from a client, as I haven't seen this behavior in a long time.

Some research and testing indicating that this was occurring, and is very prevalent on Macs using Google Chrome.

Fixes I've identified are:

1. Change in CSS the code that "turns off" borders on images FROM
Code:
img {
	border: none;
}
TO

Code:
img,
img a {
	outline: none !important;
	border: none !important;
}
2. Dreamweaver codes image maps with a style setting of

Code:
border=0
This doesn't validate for W3C, so I've been deleting this and using the CSS declaration instead. This may be causing the problem in Google Chrome.

3. Additionally, I found a recommendation online for Chrome to add this declaration to the "area" definition on the actual image map code:

Code:
<map name="Map1" id="Map1">
  <area onclick="blur()" shape="poly" coords="27,92,62,77,93,93,157,69,212,63,242,65,299,54,327,44,327,22,358,30,395,13,403,47,374,53,305,70,303,94,294,129,253,147,180,136,130,136,57,137,27,137" href="home-page.html" alt="Home Page" />
</map>
The onclick "blur" is apparently the only thing that works in Chrome on a Mac.

4. Running this down was like playing "whack a mole". Using the above techniques seems to have fixed the problems in IE and Chrome that I had seen, I'm waiting for a report back from the client who is using Chrome on a Mac laptop.

If anybody has any other suggestions, please feel free to contribute to this.

Ernest McDermon
Snellville, GA