Esta publicación te enseñará:
- ¿Qué son los mapas de imágenes HTML?
- ¿Cómo crear mapas de imagen en un documento HTML?
- ¿Cómo crear un mapa de imagen vinculado a otra página?
¿Qué son los mapas de imágenes HTML?
El mapa de imagen es una imagen con áreas en las que se puede hacer clic. Para hacer un mapa de imagen en HTML, el “
Sintaxis
La sintaxis para especificar mapas de imagen en un documento HTML se menciona a continuación:
< imagen origen = 'imágenes/img1.jpg' todo = 'ordenador portátil' mapa de uso = '#espacio de clic' >
< mapa nombre = 'espacio de clic' >
< área forma = 'recto' coords = '224,37,422,312' href = 'portátil.html' >
< / mapa >
Él ' El elemento ” se define con los siguientes atributos:
- “ origen ” especifica la ruta de la imagen.
- “ todo ” muestra un texto alternativo cuando una imagen no se puede cargar.
- “ mapa de uso ” se especifica para que se pueda hacer clic en las áreas de la imagen. Para hacer un enlace, su valor debe ser el mismo que la clase o id del elemento “
”.
Él '
- “ forma ” especifica el tamaño del área de un HTML “
' elemento. - “ coords El atributo ” define las coordenadas del área en la que se puede hacer clic.
- “ href El atributo ” establece la URL de la fuente.
¿Cómo crear mapas de imagen en un documento HTML?
Para crear un mapa de imagen en un documento HTML, consulte las instrucciones proporcionadas:
- En HTML, agregue un ' ” elemento, y asigne una clase “ imagen-mapa ”.
- Dentro de este div, agregue un '
” elemento para agregar una imagen asociada con los atributos discutidos anteriormente.
- Luego, agregue un HTML “
” elemento y asígnele el “ espacio de clic ' nombre. - Tenga en cuenta que el “ mapa de uso Al atributo se le asigna el nombre “ #espaciodeclic 'señalando el' nombre ” atributo de la etiqueta “
”. - En su interior, agregue el ' <área> ” etiqueta con los atributos mencionados anteriormente:
< división clase = 'imagen-mapa' >
< imagen origen = 'imágenes/img1.jpg' todo = 'ordenador portátil' mapa de uso = '#espacio de clic' >
< mapa nombre = 'espacio de clic' >
< área forma = 'recto' coords = '224,37,422,312' href = 'portátil.html' >
< / mapa >
< / división >Avancemos hacia la sección CSS para ajustar el tamaño de la imagen.
Estilo “
” en CSSUtilice el “ .imagen-mapa ” clase para acceder a la “
” y aplique las siguientes propiedades CSS: .imagen-mapa {
ancho : 700 píxeles;
margen: coche;
}Aquí está la descripción de las propiedades CSS mencionadas:
- Él ' ancho La propiedad ” establece el ancho del elemento div.
- Él ' margen La propiedad ” agrega más espacio alrededor del elemento.
Elemento de estilo “img”
.imagen-mapa img {
ancho : 100 %;
}Vea, las coordenadas del área especificadas en el “ coords Ahora se puede hacer clic en el atributo ”:
En la siguiente sección, aprenderemos cómo vincular el mapa de imágenes a otra fuente.
¿Cómo crear un mapa de imagen vinculado a otra página?
Cree otra página HTML con la extensión “ .html ” siguiendo los pasos que se mencionan a continuación:
- En nuestro caso, le damos el nombre “ portátil.html ”.
- Agregue un elemento div y asígnele una clase ' portatil-img ”.
- Luego, coloca una imagen usando el botón “
” elemento y asociar el “ origen ' y ' ancho ” atributos.
- Luego, especifique un párrafo usando el “ ' elemento:
< imagen origen = '/images/laptop.jpg' ancho = '400 píxeles' >
< pag >Una computadora portátil es una computadora portátil que se puede mover y usar en una variedad de entornos.< / pag >
< / división >En CSS, especifique las siguientes propiedades de CSS en el ' portatil-img ' clase:
.laptop-img {
ancho : 500 píxeles;
margen: coche;
}Producción
Ahora, vincularemos el “ portátil.html ” página a una imagen “ <área> ” elemento de la primera página. Para hacerlo, especifique la URL de la página a la “ href ” atributo del elemento “<área>” como se muestra a continuación:
< área forma = 'recto' coords = '310,57,590,470' href = 'portátil.html' >Producción
Hemos aprendido con éxito qué son los mapas de imágenes y cómo se vinculan con otras fuentes.
Conclusión
El HTML “
El elemento ” se utiliza para crear un mapa de imagen o una imagen con áreas en las que se puede hacer clic. Para definir las áreas en las que se puede hacer clic en la imagen, uno o más ' <área> Las etiquetas ” se agregan dentro del elemento “ ”. Además, los atributos asociados con la etiqueta “ ” son “ forma ”, “ coords ', y ' href ”. Esta publicación ha ilustrado cómo crear mapas de imágenes HTML con un ejemplo. - Dentro de este div, agregue un '