Cuando se agrega un vínculo a una imagen en lenguaje de marcado de hipertexto (HTML), ese vínculo 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 imágenes. Por ejemplo, se está utilizando una imagen rectangular que tiene una altura de 400 píxeles y una anchura 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 imagen HTML funcione correctamente.
La esquina superior izquierda se llama 0,0 cuando se utiliza un mapa de imagen HTML. La esquina inferior derecha en este caso sería 250,400. Las medidas se hacen primero con el ancho y luego con el alto. Una manera fácil de pensar en ello es que la primera medición le dice al HTML qué tan lejos hacia la derecha ir desde el borde izquierdo y la segunda es cómo decirle cuántos píxeles deben ir hacia abajo. Si el programador quiere que un punto en el mapa esté a 10 píxeles del borde izquierdo y 50 píxeles hacia abajo, las coordenadas serían 10,50.
Hay tres formas diferentes que el programador puede invocar 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 de 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. Un polígono se crea escribiendo las cinco coordenadas, de arriba a la derecha.
La codificación de mapas de imágenes HTML es la siguiente:
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 conducirá al usuario cuando haga clic en él. Cuando la imagen se coloca en el sitio web con HTML, el programador debe escribir: usemap = «prueba». Esto le dirá a la imagen qué mapa de imagen HTML usar.