¿Cómo creo un mapa de imagen HTML?

Cuando se agrega un enlace a una imagen en el 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, lo que le permite incrustar varios enlaces en una imagen. Esto se hace especificando una forma para el enlace y diciéndole a 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 un ancho de 250 píxeles. A continuación, el programador debe saber cómo medir con precisión la forma en las coordenadas para que el mapa de imagen HTML funcione correctamente.

tLa esquina superior izquierda se llama 0,0 cuando se usa un mapa de imagen HTML. La esquina inferior derecha en este caso sería de 250,400. Las medidas se realizan con el ancho primero, y luego la altura. Una manera fácil de pensarlo es que la primera medición es decirle al HTML qué tan lejos a la derecha de ir desde el borde izquierdo y el segundo es cómo decirlo cuántos píxeles bajar. 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, el programador puede invocar para un mapa de imagen HTML: rect, círculo y polígono. "Rect" significa Rectangle, y el programador primero debe escribir las coordenadas para la esquina superior izquierda y luego la parte inferior derecha. Se especifica un círculo 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 derecha.

La codificación del mapa de imágenes HTML es así:

<área href = "url.html" forma = rect coords = "10,50,20,60">
<área href = "url.html" forma = círculo coords = "10,50,4">
<área href = "url.html" forma = polygon 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 imágenes llevará a un usuario cuando él o ella haga clic en ella. 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.

OTROS IDIOMAS