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>
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 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;
}