Estoy usando un código simple para identificar partes de un velero. En Safari, cuando hace clic en un área del mapa, la imagen muestra un contorno azul alrededor del área. En otros navegadores (Chrome, Firefox, por ejemplo) no hay contorno. ¿Hay algo que pueda agregar a mi código para que todos los navegadores muestren un esquema?
<!--- 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>¿Hay algo que pueda agregar a mi código para que todos los navegadores muestren un esquema?
La mejor solución que se me ocurrió que todavía usa la etiqueta de área es crear un <svg> para cada <area> que tenga una ruta con las mismas coordenadas.Esta página sobre rutas svg será muy útil si decide utilizar esta solución.
Aquí hay un ejemplo de trabajo con las tres áreas que proporcionó:
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> Puede adaptar el fill y el outline dentro de los svgs a su gusto. He proporcionado 3 variantes, elija una que le guste y utilícela en todas ellas.
Si esta solución es demasiado complicada o requiere mucho tiempo para usted:
Probablemente pueda usar <div> s, etc. y diseñarlos usted mismo sin necesidad de SVG.
Aquí hay algunas soluciones diferentes de una pregunta muy similar.
Nunca eliminaría el esquema del navegador ( outline: none ). El esquema está ahí por una razón: proporcionar comentarios adicionales para los usuarios del teclado. Pero podrías encontrar algunos trucos aquí. https://www.tjvantoll.com/2013/01/28/stop-messing-with-the-browsers-default-focus-outline/ En mi opinión, un mejor enfoque sería agregar explícitamente un esquema personalizado
div:focus, div:focus-within { outline: 1px solid blue; }