html images maps: how to not have a border when clicking a selectable part of image

Question

Sorry for the awkwardly phrased question. But I've made a website who's menu consists of an image map and when clicking a certain part of the menu a blue border appears around the coordinates. Is it possible for me to get rid of the blue border?

I can't upload an image cause I lack the reputation but if you'd like a reference image I could directly send you one.

edit: added code

        <div id = "logo"><img src="./images/logo.png" usemap="#menu"></div>    

        <map name="menu">
            <area shape ="rect" coords="0,131,331,0" href="index.html">
            <area shape="rect" coords="5,156,60,132" href="film.html">
            <area shape="rect" coords="60,156,118,132" href="photo.html">
            <area shape="rect" coords="118,156,216,132" href="illustrations.html" >
            <area shape="rect" coords="216,156,270,132" href="misc.html" >
            <area shape="rect" coords="270,156,323,132" href="about.html" >

        </map>

      </div>

score 2 · Accepted Answer · edited May 23 '17 at 12:34

2

Solution: how to remove the border?

area:focus{
  border: none;
  outline-style: none; 
  -moz-outline-style:none;  
}

Fiddle: http://jsfiddle.net/Ub886/6/

edited May 23 '17 at 12:34

Community

1
1

answered Oct 10 '14 at 09:20

Jojo

36
2

score 1 · Answer 2 · answered Apr 30 '14 at 20:17

1

The CSS property that causes you to see that blue outline is called outline

In your .css file or inside <style> </style> at the top of your .html add:

input { outline: 0; }

And to take care of any other exceptions you might have:

input:hover, input:active, input:focus { outline: 0; }

Also, this will work only for the <input> tag. Change input in the css to whatever your tag is

answered Apr 30 '14 at 20:17

This doesn't seem to be working. I've tried to apply this to the img property, the map property and to a div where I've contained all the info for the image map. Any idea what is up? Also, this only happens on Chrome and Safari, not Firefox so it might be a browser specific attribute I need to edit. – Cain Apr 30 '14 at 21:45
@EvanLuc Can you add the HTML code to your question so I can get a better view of the structure? – Apr 30 '14 at 21:59

score 0 · Answer 3 · edited Apr 30 '14 at 21:19

0

apply this css property to image

outline:none;

edited Apr 30 '14 at 21:19

Arian Faurtosh

17,987
21
77
115

answered Apr 30 '14 at 20:11

Dinǝsh Gupta

377
1
2
9

score 0 · Answer 4 · edited May 23 '17 at 10:30

0

Check this answer Removing outline on image map area :

CSS

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

edited May 23 '17 at 10:30

Community

1
1

answered Aug 09 '16 at 21:09

rafaellorey

661
1
6
7

html images maps: how to not have a border when clicking a selectable part of image

4 Answers4