Removing outline on image map area

Question

Is there anyway to remove the outline when you select an area on an image map? See: enter image description here

I'm using Chrome on Snow Leopard.

See here for cross-browser solution: http://stackoverflow.com/a/12196766/1491212 — Armel Larcier, Oct 19 '12 at 22:50

Armel Larcier · Accepted Answer · 2014-05-08T16:02:59.900

63

It seems like all you got to do to remove these borders lies on the img tag, by setting the hidefocus attribute and the outline css property on it like this:

HTML

<img class="map" src="..." usemap="..." hidefocus="true" />

CSS

img.map, map area{
    outline: none;
}

This should work cross-browser!

EDIT

Like Sergey K commented, if you're not looking to support IE6 you can save bytes by just using an attribute selector.

img[usemap], map area{
    outline: none;
}

Support starts with IE7.

edited May 08 '14 at 16:02

answered Aug 30 '12 at 12:23

Armel Larcier

15,747
7
68
89

1

Any way to get it to work in IE with pure CSS, i.e. without the `hidefocus="true"` part? Tried up to IE11, no luck so far. – rustyx Jun 11 '14 at 13:57
I guess not... don't you have access to sourcecode? Javascript? – Armel Larcier Jun 11 '14 at 21:06
Of course, 'hidefocus' is not valid a valid attribute in HTML5. – richplane Jan 23 '15 at 15:56
+100 for providing an answer in 2012 that works for IE6 – Ojen Jun 14 '17 at 21:34

score 8 · Answer 2 · answered Aug 19 '11 at 18:43

8

I was having this same issue with both chrome and safari and found success by assigning a class .map to each area tag and giving the class the following style:

.map {
outline: 0;
}

answered Aug 19 '11 at 18:43

Amanda

81
1
2

score 7 · Answer 3 · answered Jan 07 '13 at 22:12

7

Kinda old-fashioned, but does this work:

    <area onfocus="blur();" ...

?

GTX, CS

answered Jan 07 '13 at 22:12

Carsten Schmidt

71
1
1

1

I tried many many (border, outline, ..) things, and only this worked, thanks. – Francisco Corrales Morales Feb 17 '14 at 15:19
Working with SharePoint 2013 and this was the only technique that worked. Thanks – MunkeyWrench Feb 17 '14 at 19:27
causes dotted outline in Firefox, removing that and adding a tabindex="-1" to each solved it for me. – fastasleep Apr 19 '14 at 00:49
It worked for me but I needed to apply this only to IE, because otherwise Firefox showed the dotted border while the area was clicked (before releasing the click) – Joan Nov 09 '16 at 10:22

score 6 · Answer 4 · answered Jul 07 '11 at 19:47

6

Give your imagemap an id of "Map" then use the following CSS declaration:

#Map area {
    outline: none;
}

answered Jul 07 '11 at 19:47

Eric

61
1
2

It doesn't work, cause the area tags inherits the outline from the image you've "added" the map tag to. So, to be sure, I've added the "outline: none;" property not only to the area tags, but to the main image too. – pesho hristov Aug 16 '13 at 11:43

score 2 · Answer 5 · answered Mar 21 '14 at 10:08

2

So if you have an archaic webpage without css (I know awful!) you can fix it by inserting style="outline:none" after the coords and before the href within the area tag- absolute perfection!

answered Mar 21 '14 at 10:08

kiwi

21
1

score 1 · Answer 6 · edited Aug 05 '13 at 03:05

1

Use CSS. Set style="outline:none;" on the element, or preferably, put it in a style sheet.

edited Aug 05 '13 at 03:05

Sebastian

7,670
5
38
50

answered Jan 27 '11 at 20:59

Endophage

21,038
13
59
90

On what element? Putting on the area tag doesn't do it. Neither when putting it on the image tag. – patad Jun 16 '11 at 13:07
@meow I believe you want to put it on the `area` elements of the image map but if you're saying that doesn't work, then I'm really not sure. Double check there aren't any spelling/syntax mistakes... we all make them. – Endophage Jun 16 '11 at 14:33

score 0 · Answer 7 · answered Jan 27 '11 at 20:58

0

Tried outline:0 on its css rule ?

answered Jan 27 '11 at 20:58

Gabriele Petrioli

191,379
34
261
317

Any idea how to remove the semi-transparent box that appears on Safari for iOS? – Ricardo Sanchez Oct 27 '11 at 14:59

Removing outline on image map area

7 Answers7

Linked