How do I get rid of this border outline for my image map areas when clicked (OS X Chrome Only)

Question

I have this image map

http://corfro.com/projects/charlie-faye-tour-map/

And when you click on the different cities a black border shows up on the area but only happening in Chrome. (you might need to click a few times on different cities but the border will show up - once the bus arrives at the city the borders start showing up)

I've tried the following but to no avail.

a{outline:none;}
map > area,
map > area:active,
map > area:focus {outline: none; border:0; }

Do you guys have any suggestions? Any help is much appreciated as this is driving me crazy!

I clicked on the cities about 20 times but could not reproduce the issue... — bobsoap, Dec 04 '10 at 04:07
Maybe it's chrome for OS X only - I don't have a windows box to test out chrome on. Tried the webkit-outline but not fixing the issue. I've also had friends test this out to make sure it just wasn't me and they see the same thing. Seems to only start happening when the bus gets to the first location you click and it reveals a border around the city then any city clicked after has a border on click. — Corfro, Dec 04 '10 at 16:04
I am on Chrome OS X (v. 8.0.552.215) and I don't see the outline either. — rcravens, Dec 04 '10 at 21:57
Chrome OS X 9.0.597.16 (latest dev channel release) doesn't show any outlines either… [Edit: Just kidding. After clicking around a bit, I got the border to show up.] — Andrew, Dec 10 '10 at 20:10

score 28 · Answer 1 · answered Apr 11 '11 at 10:21

28

Old trick <area onfocus="blur(); (...) />" Good luck;

answered Apr 11 '11 at 10:21

boru

281
3
3

This worked for me too. Looks like a known Chrome/Webkit bug http://code.google.com/p/chromium/issues/detail?id=68487 – Mark Biek May 19 '11 at 17:49
2

`$("area").focus(function() { $(this).blur(); });` in case you use jQuery and want it a bit better written; the border thing is still there in IE8/7 and this fixed it for me. – Mahn Jan 28 '13 at 00:44
This worked for Safari, but then FF had a dotted outline. Removing the javascript and adding a tabindex="-1" to each solved for both! – fastasleep Apr 19 '14 at 00:51

score 9 · Answer 2 · answered Apr 05 '12 at 18:05

I had a similar problem on IE9 and this worked:

#MyImageMap, #MyImage {
    outline: none;
}

Original source of the idea: "One note about image maps is that you'll want to disable the border on the img, map, and area tags using CSS." http://forums.macrumors.com/showthread.php?t=1342928

(the area is a child of the map)

roy.d · Answer 3 · 2012-03-21T09:06:49.787

4

In the <IMG> tag add

hidefocus="true"

edited Mar 21 '12 at 09:06

answered Mar 21 '12 at 08:20

roy.d

1,030
2
16
33

score 2 · Answer 4 · edited Oct 21 '12 at 12:38

2

This fixes it on IE

img {
  outline:none;
}

edited Oct 21 '12 at 12:38

Kjuly

34,476
22
104
118

answered May 14 '12 at 11:51

jez

21
1

score 2 · Answer 5 · answered Mar 12 '14 at 22:51

2

Using jquery based on @boru solution:

    $("area").focus(function(){
        $(this).blur();
    })

answered Mar 12 '14 at 22:51

John Prado

804
8
19

score 2 · Answer 6 · answered Jan 23 '12 at 13:56

2

Try this, it worked for me ;)

a{
   outline:none !important;
   border: none !important;
}

answered Jan 23 '12 at 13:56

Peter Slivka

21
1

score 1 · Answer 7 · answered Dec 10 '10 at 20:07

1

Have you tried adding the attribute "border: none !important" ?

answered Dec 10 '10 at 20:07

TWLATL

2,859
4
25
37

score 1 · Answer 8 · answered May 31 '11 at 19:53

just found a fix to get rid of that border in firefox 4 as the .blur does not seem to fix it.

#someWrappingElement *:active { overflow-x:hidden }

if you don't get specific to the div or element it's in it can reek havoc with your page and cause things clicked on to disappear while the mouse is held down. Use in conjuction with .blur() to fix for firefox and chrome.

score 1 · Answer 9 · edited Dec 20 '11 at 17:20

1

Go to sharePoint Designer and locate your page/image
Highlight the image that has the randomized border
Find the following tags in the code:

<Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor"> </Content>
Between them Add:

style="border:none"

*may have to add them after the following: alt="" style="margin: 5px"

edited Dec 20 '11 at 17:20

musefan

47,875
21
135
185

answered Dec 20 '11 at 17:04

adam

19
1

David Moss · Answer 10 · 2010-12-14T11:35:48.433

I'm experiencing exactly the same thing with Chrome on OS X (v 8.0.552.224). I just restarted Chrome and got an automatic upgrade on my Mac for this to start appearing, so must be something in the new release.

I have noted though that the colour of the outline can be changed by altering the "outline-color" attribute of the image, but have been unable to hide it completely even though "outline" is set to "none".

score 0 · Answer 11 · answered Dec 29 '10 at 12:38

I just faced a similar problem. I couldn't get rid of the outline but was able to effectively hide it by setting the color property of the div to the background color. But I had areas of flat color. If I set color to transparent it came out black. That should be the right track to figure out a fix, though. I used it on a US map seen here: map

score 0 · Answer 12 · answered Feb 18 '21 at 07:43

A really old question, but I found another solution that might help others.

I'm using the React package react-google-maps to show my Google Maps instance and markers and used the following CSS to overwrite the user agent styles to fix this problem.

:focus {
  outline: none !important;
}

How do I get rid of this border outline for my image map areas when clicked (OS X Chrome Only)

12 Answers12

Linked