El enfoque de este artículo es crear un área dentro de un mapa de imagen usando una etiqueta <area> en un documento HTML. Se utiliza para dirigir al usuario a diferentes enlaces después de que el usuario haga clic en las partes asignadas de la imagen. Se utiliza como una etiqueta secundaria de la etiqueta <map>. No tiene una etiqueta de cierre y, por lo tanto, es una etiqueta vacía para HTML, pero en el caso de XHTML, debe cerrarla correctamente. HTML5 tiene algunos atributos nuevos.
Sintaxis:
<area> Contents </area>
Ejemplo:
html
<!DOCTYPE html> <html> <body style="text-align: center"> <h2 style="color: green;"> GeeksForGeeks </h2> <h2> How to create an area inside an image-map using HTML5? </h2> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png" alt="" width="300" height="119" class="aligncenter size-medium wp-image-910965" usemap="#shapemap" /> <map name="shapemap"> <!-- Area tag contained image. --> <area shape="poly" coords="59, 31, 28, 83, 91, 83" href= "https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png" alt="Triangle"> <area shape="circle" coords="155, 56, 26" href= "https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png" alt="Circle"> <area shape="rect" coords="224, 30, 276, 82" href= "https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png" alt="Square"> </map> </body> </html>
Producción:
Antes de hacer clic en un área específica en la que se puede hacer clic:
Después de hacer clic en un área específica en la que se puede hacer clic:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA