¿Cómo creo un mapa de imagen HTML?

Cuando se agrega un enlace a una imagen en Lenguaje de marcado de hipertexto (HTML), ese enlace se agrega a toda la imagen. Esto puede ser un problema si el programador quiere hacer una sola imagen con varias áreas o botones y cada área se usa para un enlace diferente. Un mapa de imagen HTML permite al programador especificar ciertas áreas donde irá el enlace, permitiéndole incrustar varios enlaces en una imagen. Esto se hace especificando una forma para el enlace y diciéndole al HTML qué coordenadas se utilizarán para el enlace.

Las imágenes utilizadas para Internet se miden en píxeles. Saber cuántos píxeles hay en la imagen es el primer paso esencial para crear un mapa de imagen. Por ejemplo, se está utilizando una imagen rectangular que tiene una altura de 400 píxeles y un ancho de 250 píxeles. A continuación, el programador debe saber cómo medir con precisión la forma en coordenadas para que el mapa de imágenes HTML funcione correctamente.

La esquina superior izquierda se llama 0,0 cuando se usa un mapa de imagen HTML. La esquina inferior derecha en este caso sería 250,400. Las medidas se realizan primero con el ancho y luego con la altura. Una manera fácil de pensar es que la primera medición es decirle al HTML qué tan lejos hacia la derecha debe ir desde el borde izquierdo y la segunda es cómo decirle cuántos píxeles hay que recorrer. Si el programador desea que un punto en el mapa tenga 10 píxeles desde el borde izquierdo y 50 píxeles hacia abajo, las coordenadas serían 10,50.

El programador puede invocar tres formas diferentes para un mapa de imagen HTML: rect, círculo y polígono. "Rect" significa rectángulo, y el programador tiene que escribir primero las coordenadas para la esquina superior izquierda y luego la inferior derecha. Un círculo se especifica escribiendo las coordenadas donde comienza el círculo y luego el radio del círculo. Se crea un polígono escribiendo las cinco coordenadas, de arriba a la derecha.

La codificación del mapa de imágenes HTML es así:
<map name = "test">
<area href = "url.html" shape = rect coords = "10,50,20,60">
<area href = "url.html" shape = circle coords = "10,50,4">
<area href = "url.html" shape = polígono coords = "10,50,12,55,15,60,13,65,8,55">

Cada mapa de imagen HTML debe tener un nombre, y la sección "url.html" es el enlace donde esa sección del mapa de imagen llevará a un usuario cuando haga clic en él. Cuando la imagen se coloca en el sitio web con HTML, el programador debe escribir: usemap = "test". Esto le dirá a la imagen qué mapa de imagen HTML usar.