En el mapeo de imágenes, una imagen se especifica con cierto conjunto de coordenadas dentro de la imagen que actúan como áreas de hipervínculo a diferentes destinos. Es diferente de un enlace de imagen, ya que en el enlace de imágenes, una imagen se puede utilizar para servir a un solo enlace o destino, mientras que en una imagen asignada, diferentes coordenadas de la imagen pueden servir a diferentes enlaces o destinos.
El elemento <map> se utiliza para definir la imagen del mapa en la interfaz de usuario en la que se puede hacer clic. El <mapa> requería la etiqueta <img> que ayuda a la relación entre la imagen y el mapa. El elemento <map> contiene una serie de elementos <area> que definen las áreas en las que se puede hacer clic en el mapa de imagen.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title> How to Specify an image as a server-side image-map? </title> </head> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2> How to Specify an image as a server-side image-map? </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:
