Removing The Dotted Outline from Image Map Links

[chr2014]

Hello to everyone,

I recently came across this article:

Removing The Dotted Outline

by Chris Coyier

https://css-tricks.com/removing-the-dotted-outline/

Chris says this is how you can prevent the dotted outline from appearing:

a {
outline: 0;
}

Can the dotted outline also be removed from image map links?

Here’s an example of an image map. When you click on the Sun, Mercury or Venus you’ll see a dotted outline appear.

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

Since the href attribute is not inside an anchor tag, what Chris said to do won’t prevent the dotted outline from appearing.

What would I need to do in order to prevent the dotted outline from appearing when clicking on an image map link?

Thanks very much for the help,

Chris

[Paulie_D]

What do you get when you inspect the element with Developer Tools?

Looks like an outline is provided on :focus

:focus {
  outline: -webkit-focus-ring-color auto 5px;
}

So there is your point of..ahem…focus.

area:focus {
outline:0;
}

Worth a try.

[Author]

Posts