HTML area outline in different browsers

Question

I am using a simple code to identify parts of a sailboat. In Safari, when you click on an area in the map, the image shows a blue outline around the area. In other browsers (Chrome, Firefox, eg) there is no outline. Is there anything I can add to my code to get all the browsers to show an outline?

<!---
function partsinfo(data)
{
document.parts.comment.value = data;
}
// --->
</script>
<form name='parts'><b><a id="starthere">PARTS OF THE SNIPE:</B></a> Click on any part of the Snipe boat below (where your arrow becomes a hand) to see the name of the part in the next line.
<input type='text' name='comment' size="36" /></form>

<div align='center'>
<p align='center' style="margin-bottom: 0"><map name="FPMap0">

<area href="javascript:partsinfo('Aft Deck')" shape='poly' coords='344, 562, 353, 552, 426, 552, 423, 558'>
<area href="javascript:partsinfo('Boom')" shape='poly' coords='146, 481, 146, 474, 364, 466, 364, 473'>
<area href="javascript:partsinfo('Boom Vang')" shape='poly' coords='142, 544, 142, 537, 194, 482, 201, 482'>
<!---etc for 47 more parts--->
</map>
<img border='0' src='https://dalsail.com/images/snipe540x720.gif' width='540' height='720' usemap="#FPMap0" alt="Snipe photo" /></p>

`area` tag defines the interactive boundary but doesn't have an innate visual representation, which makes it impossible to style it with CSS. While you can try a JavaScript with `canvas` element as in [this SO answer](https://stackoverflow.com/a/12667751/7216508), I'd recommend you recreate this drawing in `svg` and style via CSS. It'll make it far more flexible in terms of visual scalability and code maintainability. — Bumhan Yu, Feb 28 '22 at 19:38
Also, your HTML markups are generally outdates—e.g. use of deprecated HTML attributes like `align`, `border`, or `width` can be CSS properties, and `b` tag can either be replaced with `strong` tag or simply styled via CSS. — Bumhan Yu, Feb 28 '22 at 19:40
I converted my .gif image to .svg. My website is from a purchased template containing a main.css file, but I've only made ever changes to the html files as I've not worked in css before. So I don't really know how to style via css. Any guidance you can give me there will be appreciated. — Gene, Mar 02 '22 at 16:09
Assuming your `svg` consists of several `path`, `circle`, `g`, etc elements inside, you can target them with usual CSS classes and IDs. See this [CSS Tricks article](https://css-tricks.com/using-svg/#aa-now-you-can-control-with-css) to learn further. They also provide a [Code Pen](https://codepen.io/chriscoyier/pen/DMypqy) example for reference. — Bumhan Yu, Mar 02 '22 at 22:08

Zach Jensz · Answer 1 · 2022-03-03T01:47:23.343

Is there anything I can add to my code to get all the browsers to show an outline?

The best solution I could come up with that still uses the area tag is to create a <svg> for each <area> that has a path with the same coordinates. This page on svg paths will be very useful if you decide to use this solution.

Here is a working example with the three areas you provided:

svg {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 540px;
  height: 720px;
}

area:hover+svg {
  opacity: 1;
}

<!---
function partsinfo(data)
{
document.parts.comment.value = data;
}
// --->
<form name='parts'><b><a id="starthere">PARTS OF THE SNIPE:</B></a> Click on any part of the Snipe boat below (where your arrow becomes a hand) to see the name of the part in the next line.
  <input type='text' name='comment' size="36" /></form>

<div align='center'>
  <p align='center' style="margin-bottom: 0">
    <map name="FPMap0">
      <area
        href="javascript:partsinfo('Aft Deck')"
        shape='poly'
        coords='344, 562, 353, 552, 426, 552, 423, 558'
      />
      <svg viewBox="0 0 540 720">
        <path stroke="#00f" stroke-width="2" fill="#00f4" d="M344 562 L 353 552 L 426 552 L 423 558Z"/>
      </svg>

      <area
        href="javascript:partsinfo('Boom')"
        shape='poly'
        coords='146, 481, 146, 474, 364, 466, 364, 473'
      />
      <svg viewBox="0 0 540 720">
        <path fill="#f00a" d="M146 481 L 146 474 L 364 466 L 364 473Z"/>
      </svg>

      <area
        href="javascript:partsinfo('Boom Vang')"
        shape='poly'
        coords='142, 544, 142, 537, 194, 482, 201, 482'
      />
      <svg viewBox="0 0 540 720">
        <path stroke="#00f" stroke-width="2" fill="none" d="M142 544 L 142 537 L 194 482 L 201 482Z"/>
      </svg>
      <!---etc for 47 more parts--->
  </map>
    <img border='0' src='https://dalsail.com/images/snipe540x720.gif' width='540' height='720' usemap="#FPMap0" alt="Snipe photo" />
  </p>
</div>

You can adapt the fill and outline within the svgs to your own liking. I have provided 3 variants, pick one you like and use it on all of them.

If this solution is too complicated/time consuming for you:

You can probably use <div>s etc. and style them yourself without the need for SVG.

Here are a few different solutions from a very similar question.

I tried adding outline: none as well as outline='none' to the area elements without any change...but this is the direction I'd like to go if we can find the right parameter to add. — Gene, Mar 01 '22 at 01:00
I think OP's question was to "get all the browsers to _show_ an outline" rather than _hiding_ it. — Bumhan Yu, Mar 02 '22 at 22:04

score 0 · Answer 2 · answered Mar 01 '22 at 19:57

I would never remove the browser outline (outline: none). The outline it is there for a reason: to provide additional feedback for keyboard users. But you could find some tricks here. https://www.tjvantoll.com/2013/01/28/stop-messing-with-the-browsers-default-focus-outline/ A better approach in my opinion it would be to explicitly add a custom outline

div:focus,
div:focus-within { 
  outline: 1px solid blue;
}

HTML area outline in different browsers

2 Answers2