Mapas de imágenes HTML
Con los mapas de imágenes HTML, puede crear áreas en las que se puede hacer clic en una imagen.
Mapas de imágenes
La <map>etiqueta HTML define un mapa de imagen. Un mapa de imagen es una imagen con áreas en las que se puede hacer clic. Las áreas se definen con una o más <area>etiquetas.
Intente hacer clic en la computadora, el teléfono o la taza de café en la imagen a continuación:
Ejemplo
Aquí está el código fuente HTML para el mapa de imagen de arriba:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350"
alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250"
alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44"
alt="Coffee" href="coffee.htm">
</map>
¿Como funciona?
La idea detrás de un mapa de imagen es que debería poder realizar diferentes acciones según el lugar de la imagen en el que haga clic.
Para crear un mapa de imagen, necesita una imagen y algún código HTML que describa las áreas en las que se puede hacer clic.
La imagen
La imagen se inserta usando la <img>etiqueta. La única diferencia con otras imágenes es que debes agregar un usemapatributo:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
El usemapvalor comienza con una etiqueta hash
#seguida del nombre del mapa de imagen y se usa para crear una relación entre la imagen y el mapa de imagen.
Consejo: ¡Puedes usar cualquier imagen como mapa de imagen!
Crear mapa de imagen
Luego, agregue un <map>elemento.
El <map>elemento se utiliza para crear un mapa de imagen y se vincula a la imagen mediante el name
atributo requerido:
<map name="workmap">
El nameatributo debe tener el mismo valor que el
<img>atributo de usemap.
Las areas
Luego, agregue las áreas en las que se puede hacer clic.
Un área en la que se puede hacer clic se define mediante un <area>elemento.
Forma
Debe definir la forma del área en la que se puede hacer clic y puede elegir uno de estos valores:
rect- define una región rectangularcircle- define una región circularpoly- define una región poligonaldefault- define toda la región
También debe definir algunas coordenadas para poder colocar el área en la que se puede hacer clic en la imagen.
Forma = "rect"
Las coordenadas para shape="rect"vienen en pares, una para el eje x y otra para el eje y.
Entonces, las coordenadas 34,44se ubican a 34 píxeles del margen izquierdo y a 44 píxeles de la parte superior:
Las coordenadas 270,350se encuentran a 270 píxeles del margen izquierdo y a 350 píxeles de la parte superior:
Ahora tenemos suficientes datos para crear un área rectangular en la que se puede hacer clic:
Ejemplo
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Esta es el área en la que se puede hacer clic y enviará al usuario a la página "computer.htm":
Forma = "círculo"
Para agregar un área circular, primero ubique las coordenadas del centro del círculo:
337,300
Luego especifique el radio del círculo:
44 píxeles
Ahora tiene suficientes datos para crear un área circular en la que se puede hacer clic:
Ejemplo
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Esta es el área en la que se puede hacer clic y enviará al usuario a la página "coffee.htm":
Forma = "poli"
El shape="poly"contiene varios puntos de coordenadas, lo que crea una forma formada con líneas rectas (un polígono).
Esto se puede utilizar para crear cualquier forma.
¡Como tal vez una forma de croissant!
¿Cómo podemos hacer que el croissant de la imagen de abajo se convierta en un enlace en el que se puede hacer clic?
Tenemos que encontrar las coordenadas x e y para todos los bordes del croissant:
Las coordenadas vienen en pares, una para el eje x y otra para el eje y:
Ejemplo
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
Esta es el área en la que se puede hacer clic y enviará al usuario a la página "croissant.htm":
Mapa de imágenes y JavaScript
Un área en la que se puede hacer clic también puede activar una función de JavaScript.
Agregue un clickevento al <area>elemento para ejecutar una función de JavaScript:
Ejemplo
Aquí, usamos el atributo onclick para ejecutar una función de JavaScript cuando se hace clic en el área:
<map name="workmap">
<area shape="circle" coords="337,300,44"
href="coffee.htm" onclick="myFunction()">
</map>
<script>
function
myFunction() {
alert("You clicked the coffee cup!");
}
</script>
Resumen del capítulo
- Use el elemento HTML
<map>para definir un mapa de imagen - Use el elemento HTML
<area>para definir las áreas en las que se puede hacer clic en el mapa de imagen - Use el atributo HTML
usemapdel<img>elemento para apuntar a un mapa de imagen
Etiquetas de imagen HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML .