Breaking

Post Top Ad

Your Ad Spot

martes, 7 de mayo de 2019

Mapas de Imagen HTML

Los mapas de imágenes son imágenes con áreas en las que se puede hacer clic (a veces denominadas "zonas activas") que generalmente se vinculan a otra página.
Si se utilizan de manera adecuada, los mapas de imágenes pueden ser un medio eficaz para que los usuarios obtengan más información sobre un elemento representado en la imagen. Pueden hacer clic en diferentes partes de la imagen para abrir una página web relacionada con esa parte.
Para crear un mapa de imagen:
  • Añadir la <img>etiqueta

    Incruste la imagen en la página utilizando el método habitual (a través del <img>elemento).
    Por supuesto, la imagen debe estar disponible primero en la web. Puedes subirlo o hacer referencia a una imagen existente. Puede ser una foto, un icono, un logotipo, una imagen de archivo, etc. Cualquier imagen está bien.
  • Añadir el mapa

    Use la <map>etiqueta HTML para crear un mapa con un nombre. Dentro de esta etiqueta, especificará dónde están las áreas en las que se puede hacer clic con la <area>etiqueta HTML .
  • Enlázalos con el usemapatributo

    Este bit enlaza el mapa con la imagen.
    Agregue el usemapatributo a la <img>etiqueta. El valor debe ser el nombre del mapa, precedido por un #símbolo de hash ( ).
    Por ejemplo, si el mapa lo tiene, name="pluto"entonces debería usarlo usemap="#pluto"en la imagen.

Ejemplo de mapa de imagen

<! - Imagen ->
< img  usemap = "# aus-nz"  src = "/pix/examples/australia-nz-map.gif"  width = "200"  height = "142" 
alt = "Mapa de Australia y Nueva Zelanda" >
Al aire libre
<! - Mapa ->
< map  name = "aus-nz" >
    < area  shape = "poly"  coords = "3,47,45,12,105,7,140,60,120,125,12,90"  href = "https://en.wikipedia.org/wiki/Australia"  target = "_blank"  alt = "Australia" >
    < area  shape = "poly"  coords = "180,85,200,98,167,142,157,138"  href = "https://en.wikipedia.org/wiki/New_Zealand"  target = "_blank"  alt = "New Zealand" >
</ map >
De acuerdo, en comparación con nuestras lecciones anteriores, este código parece bastante complejo. Sin embargo, una vez que lo estudias, no es tan complejo. Todo lo que estamos haciendo es agregar una imagen, luego estamos creando un mapa con coordenadas. La parte más difícil es conseguir todas las coordenadas correctas.
En nuestro ejemplo, usamos la <area>etiqueta junto con los atributos shapecoordEstos aceptan los siguientes atributos:
shape
Define una forma para el área pulsable. Valores posibles:
  • default
  • rect
  • circle
  • poly
coords
Especifica las coordenadas del área pulsable. Las coordenadas se especifican de la siguiente manera:
rect
izquierda , arriba , derecha , abajo
circulo
centro-x , centro-y , radio
escuela politécnica
x1 , y1 , x2 , y2 , ...
Puede usar los atributos anteriores para configurar su propio mapa de imágenes con tantas formas y regiones seleccionables como desee.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas