Mapas de imagen HTML
Esta publicación te enseñará:
- ¿Qué son los mapas de imagen HTML??
- Cómo crear mapas de imagen en el documento HTML?
- Cómo crear un mapa de imagen vinculado a otra página?
¿Qué son los mapas de imagen HTML??
El mapa de la imagen es una imagen con áreas a las que se puede hacer clic. Para hacer un mapa de imagen en HTML, el "El elemento se utiliza. Además, uno o más ""Las etiquetas se agregan dentro del elemento" "para especificar las áreas.
Sintaxis
La sintaxis para especificar mapas de imagen en un documento HTML se menciona a continuación:
El "El elemento se define con los siguientes atributos:
- "SRC"Especifica la ruta de la imagen.
- "alternativo"Muestra un texto alternativo cuando una imagen no puede cargarse.
- "usemap"Se especifica para hacer que las áreas de imagen se puedan hacer clic. Para hacer un enlace, su valor debe ser el mismo que la clase o ID del elemento "".
El "El elemento se agrega con los siguientes atributos:
- "forma"Especifica el tamaño del área de un HTML"" elemento.
- "coords"El atributo define las coordenadas del área de clicsable.
- "href"El atributo establece la URL de la fuente.
Cómo crear mapas de imagen en el documento HTML?
Para crear un mapa de imagen en un documento HTML, consulte las instrucciones dadas:
- En HTML, agregue un ""Elemento y asignar una clase"mapa de imágenes".
- Dentro de este div, agregue un "Elemento para agregar una imagen asociada con los atributos discutidos anteriormente.
- Luego, agregue un HTML ""Elemento y asignarlo el"clickspace" nombre.
- Tenga en cuenta que el "usemap"Atributo se le asigna el nombre"#Cluspace"Señalando al"nombre"Atributo de la etiqueta" ".
- Dentro de él, agregue el ""Etiqueta con los atributos mencionados anteriormente:
Avancemos hacia la sección CSS para ajustar el tamaño de la imagen.
Estilo "" en CSS
Utilizar el ".mapa de imágenesClase "para acceder al""Elemento y aplique las siguientes propiedades de CSS:
.mapa de imagenAncho: 700px;
margen: auto;
Aquí está la descripción de las propiedades CSS mencionadas:
- El "ancho"La propiedad establece el ancho del elemento Div.
- El "margen"La propiedad agrega más espacio alrededor del elemento.
Elemento de estilo "img"
.Imagen-map imgAncho: 100%;
Ver, las coordenadas de área especificadas en el "coords"El atributo ahora se puede hacer clic:
En la siguiente sección, aprenderemos cómo vincular el mapa de la imagen 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 mencionados a continuación:
- En nuestro caso, le damos el nombre "computadora portátil.html".
- Agregue un elemento div y asigne una clase "portátil".
- Luego, coloque una imagen usando el ""Elemento y asociar el"SRC" y "ancho"Atributos.
- A continuación, especifique un párrafo usando el "" elemento:
Una computadora portátil es una computadora portátil que se puede mover y usar en una variedad de configuraciones.
En CSS, especifique las siguientes propiedades de CSS al "portátil" clase:
.laptop-IMGAncho: 500px;
margen: auto;
Producción
Ahora, vincularemos el "computadora portátil.html"Página a una imagen""Elemento de la primera página. Para hacerlo, especifique la URL de la página a la "href"Atributo del elemento" "como se muestra a continuación:
Producción
Hemos aprendido con éxito qué son los mapas de imágenes y cómo están vinculados con otras fuentes.
Conclusión
El html "El elemento se utiliza para crear un mapa de imagen o una imagen con áreas haciendo clic en. Para definir las áreas de clic de la imagen, una o más ""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 imagen HTML con un ejemplo.