HTML Mapas de imágenes
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 etiqueta HTML <map> define un mapa de imágenes. Un mapa de imágenes es una imagen con áreas en las que se puede hacer clic. Las áreas se definen con una o más etiquetas <area>.
Intenta 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>
Inténtalo tú mismo »
¿Cómo funciona?
La idea detrás de un mapa de imágenes es que deberías poder realizar diferentes acciones dependiendo del lugar de la imagen en el que hagas clic.
Para crear un mapa de imágenes, 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 etiqueta <img>. La única diferencia con otras imágenes es que debes agregar un atributo usemap:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
El valor usemap comienza con una etiqueta hash # seguida del nombre del mapa de imagen y se utiliza para crear una relación entre la imagen y el mapa de imagen.
Consejo: ¡Puedes utilizar cualquier imagen como mapa de imágenes!
Crear mapa de imagen
Luego, agregue un elemento <map>.
El elemento <map> se utiliza para crear un mapa de imagen y se vincula a la imagen mediante el requerido name atributo:
<map name="workmap">
El atributo name debe tener el mismo valor que el <img> usemap de atributo.
Las Áreas
Luego, agregue las áreas en las que se puede hacer clic.
Un área en la que se puede hacer clic se define mediante un elemento <area>.
Forma
Debes definir la forma del área en la que se puede hacer clic y puedes 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.
Shape="rect"
Las coordenadas de shape="rect" vienen en pares, uno para el eje x y otro para el eje y.
Entonces, las coordenadas 34,44 se ubican a 34 píxeles del margen izquierdo y a 44 píxeles de la parte superior:
Las coordenadas 270,350 se 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:
Esta es el área en la que se puede hacer clic y enviará al usuario a la página "computer.htm":
Shape="circle"
Para agregar un área circular, primero ubique las coordenadas del centro del círculo:
337,300
Luego especifique el radio del círculo:
44 pixels
Ahora tienes suficientes datos para crear un área circular en la que se puede hacer clic:
Esta es el área en la que se puede hacer clic y enviará al usuario a la página "coffee.htm":
Shape="poly"
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.
¡Quizás en forma de croissant!
¿Cómo podemos hacer que el croissant de la imagen siguiente se convierta en un enlace en el que se puede hacer clic?
Tenemos que encontrar las coordenadas xey 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">
Inténtalo tú mismo »
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 evento click al elemento <area> 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>
Inténtalo tú mismo »
Resumen del capítulo
- Utilice el elemento HTML
<map>para definir un mapa de imagen - Utilice el elemento HTML
<area>para definir las áreas en las que se puede hacer clic en el mapa de imagen - Utilice el atributo HTML
usemapdel elemento<img>para señalar un mapa de imagen
HTML Etiquetas de imagen
| Tag | Descripción |
|---|---|
| <img> | Define una imagen |
| <map> | Define un mapa de imágenes |
| <area> | Define un área en la que se puede hacer clic dentro de un mapa de imagen |
| <picture> | Define un contenedor para múltiples recursos de imágenes |
Para obtener una lista completa de todas las etiquetas HTML disponibles, visite nuestra Referencia de etiquetas HTML.
