Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Removing The Dotted Outline from Image Map Links

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #194167
    chr2014
    Participant

    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

    #194168
    Paulie_D
    Moderator

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.