28

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.

2

7 Answers 7

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.

4
  • 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, 2014 at 13:57
  • I guess not... don't you have access to sourcecode? Javascript? Jun 11, 2014 at 21:06
  • Of course, 'hidefocus' is not valid a valid attribute in HTML5.
    – richplane
    Jan 23, 2015 at 15:56
  • +100 for providing an answer in 2012 that works for IE6
    – Ojen
    Jun 14, 2017 at 21:34
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;
}
7

Kinda old-fashioned, but does this work:

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

?

GTX, CS

4
  • 1
    I tried many many (border, outline, ..) things, and only this worked, thanks. Feb 17, 2014 at 15:19
  • Working with SharePoint 2013 and this was the only technique that worked. Thanks Feb 17, 2014 at 19:27
  • causes dotted outline in Firefox, removing that and adding a tabindex="-1" to each <area> solved it for me.
    – fastasleep
    Apr 19, 2014 at 0: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 9, 2016 at 10:22
6

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

#Map area {
    outline: none;
}
1
  • 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. Aug 16, 2013 at 11:43
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!

1

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

2
  • On what element? Putting on the area tag doesn't do it. Neither when putting it on the image tag.
    – patad
    Jun 16, 2011 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, 2011 at 14:33
0

Tried outline:0 on its css rule ?

1
  • Any idea how to remove the semi-transparent box that appears on Safari for iOS? Oct 27, 2011 at 14:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.