Remove Blue Lines on Selected Mapping Point

Question

How do I get rid of the blue lines that display when I select part of a mapped image. Example below: Blue Line Example

<img src="http://earlgreyblog.com/wp-content/uploads/2014/09/resources-for-bloggers_02.png" alt=""   usemap="#Map"/>
<map name="Map" id="Map" outline:none; >
    <area alt="" title="" href="http://www.nooralqahtani.com/writing-blog-post/" shape="rect"   coords="319,606,0,322" />
    <area alt="" title="" href="http://www.marketyourcreativity.com/2014/09/5-must-have-apps-for-  creative-business/" shape="rect" coords="324,605,639,260" />
    <area alt="" title="" href="http://emberandmarch.com/five-minute-disconnect/" shape="rect"   coords="638,251,323,2" />
    <area alt="" title="" href="http://www.weareflourishandprosper.com/#!WHY-BLOGGERS-SHOULDNT-BE-  EXPECTED-TO-WORK-FOR-FREE/cyv2/053CC54E-BAA7-4BCB-8E89-8857A32C64EC" shape="rect" coords="2,316,318,3"   />
</map>

check my update in answer – Gagan Gami Sep 18 '14 at 06:32 — Gagan Gami, Sep 18 '14 at 06:32

score 1 · Answer 1 · answered Sep 18 '14 at 06:13

1

Please try this code in your CSS:

area:focus {
     outline: none;
}

answered Sep 18 '14 at 06:13

Fahad Hasan

10,231
4
29
36

I lied, this still didnt work. I will update the code. – Kevin Sundstrom Sep 18 '14 at 06:16
It looks like all this does is move where the lines show up... very confusing. – Kevin Sundstrom Sep 18 '14 at 06:33

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

From:

Remove Safari/Chrome textinput/textarea glow

And

This tutorial, you can just use:

outline: none;

to remove that glow, so if it is an image map, you need to add the above css rule to that image map element, you haven't posted some code so i cant really show you the correct code that you need to add or change.

Considering your code, following should work just fine.

img, Map area{
    outline: none;
}

edited May 23 '17 at 12:06

Community

1
1

answered Sep 18 '14 at 06:13

Shaheer

2,105
4
25
39

I already have that in the code. I will try to upload the code better, not sure why it is only showing one line. – Kevin Sundstrom Sep 18 '14 at 06:20
Where would you add: img, Map area{ outline: none; } – Kevin Sundstrom Sep 18 '14 at 06:51

Gagan Gami · Accepted Answer · 2014-09-18T06:37:31.067

0

it's a good idea to use a reset CSS. add this at the top of your CSS file

img, a {border:none, outline: none;}

OR

img{border:none, outline: none;}

You can also limitate the scope and only remove border on some images by doing so:

.myClass img{border:0;}

hope this helps :)

Update:

I show in your code there is outline:none; instead style="outline:none;" correct it

CSS:

img, map area{
    outline: none;
}

This should work cross browser

edited Sep 18 '14 at 06:37

answered Sep 18 '14 at 06:21

Gagan Gami

10,121
1
29
55

I appreciate the comment, but I am trying to fix this for this one post, while keeping everything else the same. Thanks. – Kevin Sundstrom Sep 18 '14 at 06:27

Remove Blue Lines on Selected Mapping Point

3 Answers3

Update: