Image Map showing outline on click in IE and Chrome
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
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
