En este artículo, discutiremos un mapa de imagen en HTML, además de comprender su implementación a través de los ejemplos.
Un mapa de imagen se refiere a la imagen en la que se puede hacer clic que tiene un área en la que se puede hacer clic y que se puede usar para navegar a varios enlaces a otras páginas web o a la sección específica de la misma página web. La etiqueta <map> se puede usar para definir el mapa de la imagen y el área dentro de la imagen en la que se puede hacer clic se puede definir con la etiqueta <area> .
Sintaxis:
<map name="map-name"></map>
Valor de atributo:
- nombre: Se utiliza para asociar el mapa con la imagen en la que se utiliza.
Nota : el atributo de nombre en el mapa debe tener el mismo valor que el atributo de mapa de uso de la imagen .
Para mapear la imagen con diferentes áreas de la imagen, necesitamos especificar la forma particular y los puntos de coordenadas asociados. Junto con esto, también necesitamos vincular la imagen usando la etiqueta <img> .
Ejemplo 1 : En este ejemplo, el área resaltada es el área mapeada, al hacer clic en ella se accede al sitio web. También podemos usar una etiqueta de área con un mapa de imagen . 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>.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> </head> <body> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/array-2.png" alt="gfgimage" usemap="#mapID"> <map name="mapID"> <area shape="rect" coords="34, 44, 270, 350" href="https://www.geeksforgeeks.org/data-structures/?ref=shm"> </map> </body> </html>
Producción:
Ejemplo 2: En este ejemplo, estamos creando un mapa de tres formas. Si hacemos clic en cada forma, se muestra una figura de mapa de imagen.
HTML
<!DOCTYPE html> <html> <body style="text-align:center"> <h2 style="color:green;"> GeeksforGeeks </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 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:
Publicación traducida automáticamente
Artículo escrito por sravankumar8128 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA