Mapa de imágenes

Un mapa de imagen ( ing. image map , a veces un mapa táctil o un mapa gráfico ) es un objeto gráfico del lenguaje de marcado HTML asociado con una imagen y que contiene áreas especiales (puntos calientes), cuando se hace clic, se produce una transición a una URL específica (usando javascript , puede establecer otras acciones). El uso de mapas de imágenes le permite almacenar múltiples enlaces en una sola imagen.

Uso

Para agregar un mapa de imagen a una página web , se utiliza una etiqueta HTML emparejada <mapa>, en cuyo atributo "nombre" se especifica el identificador único del mapa dentro del documento. En su interior se agregan etiquetas <area> no emparejadas, cada una de las cuales describe un área activa. A la etiqueta <img> que se vinculará al mapa se le agrega un atributo usemap que contiene el nombre del mapa que se vinculará. El valor del atributo debe comenzar con un signo de libra . Al mismo tiempo, las dimensiones de la imagen deben especificarse explícitamente en la etiqueta <img>.

Parámetros (atributos) de la

mapa

nombre es el ID del mapa de imagen. Único dentro del documento. En XHTML , el atributo de nombre está en desuso y se sugiere usar el atributo id [1] en su lugar .

área

forma - la forma del punto de acceso. Valores válidos: círculo ( círculo ), rect ( rectángulo ), poli ( polígono ).
alt - texto alternativo para el área. Sirve únicamente como comentario para el enlace, ya que no se muestra en pantalla.
título : le permite establecer una información sobre herramientas para el punto de acceso.
coords - coordenadas del punto de acceso. Las coordenadas se miden en píxeles desde la esquina superior izquierda de la imagen, lo que corresponde al valor "0,0". El primer número es la coordenada horizontal, el segundo es la coordenada vertical. La lista de coordenadas depende de la forma del área:

Para un círculo, se especifican las coordenadas del centro del círculo y el radio:

< coords de área = "x,y,r" >

Para un rectángulo, las coordenadas de las esquinas superior izquierda e inferior derecha son:

< coords del área = " x1,y1,x2,y2" >

Para un polígono, las coordenadas de sus vértices se establecen:

< coords de área = "x1,y1,x2,y2,…,xN,yN" > En este caso, para "cerrar" el polígono, el primer y último par de coordenadas X e Y deben ser iguales. Si estos valores no son los mismos, el navegador debe calcular un par de coordenadas extra para cerrar el polígono.

href : especifica la dirección del enlace para la región. Las reglas de grabación son las mismas que para la etiqueta <A>.

Ejemplos

A continuación se muestra el código que crea un mapa de imagen y lo vincula a una imagen:

< html > < cuerpo > < img width = "500" height = "200" usemap = "#somemap" src = "upload.wikimedia.org/wikipedia/commons/e/e0/Figures_for_imagemap.png" > < map name = "algúnmapa" > < forma del área = "rect" coords = "6, 7, 140, 196" href = "en.wikipedia.org/wiki/Rectangle" > < forma del área = "circle" coords = "239, 98, 92" href = "en.wikipedia.org/wiki/Circle" > < area shape = "poly" coords = "386, 16, 344, 56, 350, 189, 385, 132, 489, 190, 496, 74" href = "en.wikipedia.org/wiki/Polygon" > </ mapa > </ cuerpo > </ html >

El resultado será el siguiente (las zonas activas se encuentran encima de las imágenes de las figuras):

Ventajas y desventajas

Beneficios

Los mapas le permiten definir cualquier forma del área de enlace. Dado que las imágenes de computadora son inherentemente rectangulares, no es posible hacer una referencia gráfica de forma compleja, por ejemplo, para indicar un área geográfica, sin mapas de imágenes.
Es más conveniente trabajar con un archivo: no tiene que preocuparse por unir fragmentos individuales.

Desventajas

No puede establecer texto alternativo para áreas individuales. El texto alternativo le permite obtener información textual sobre la imagen cuando la carga de imágenes está deshabilitada en el navegador. Si desactiva la visualización de imágenes, al final solo veremos un rectángulo vacío.
La forma compleja del área del enlace aumenta la cantidad de código HTML. El contorno consta de un conjunto de segmentos rectos, para cada punto de los cuales se deben especificar dos coordenadas, y el número total de dichos puntos puede ser bastante grande. Las formas complejas son un caso especial y rara vez se usan.
Con las tarjetas de imagen, no puede crear diferentes efectos que están disponibles al cortar una imagen en fragmentos: el efecto de balanceo, animación parcial, optimización individual de imágenes para su carga rápida, etc.