Con los mapas de imágenes HTML, puedes crear áreas en las que se puede hacer clic en una imagen. La etiqueta HTML <map> define un mapa de imagen. Un mapa de imagen es una imagen con áreas en las que se puedes hacer clic. Las áreas se definen con una o más etiquetas <area>.
Ejm
<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ías poder realizar diferentes acciones según el lugar de la imagen en el que hagas clic. Para crear un mapa de imagen, necesitas 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 de usemap 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.
Crear mapa de imagen
Luego, agrega un elemento <map>. El elemento <map> se usa para crear un mapa de imagen y se vincula a la imagen mediante el atributo de nombre requerido:
<map name="workmap">. El atributo name debe tener el mismo valor que el atributo usemap de <img>.
Las áreas
Luego, agrega las áreas en las que se puede hacer clic. Un área en la que se puede hacer clic se define mediante un elemento <area>.
shape
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 rectangular
- circle: define una región circular
- poly: define una región poligonal
- default: define toda la región
También debes definir algunas coordenadas para poder colocar el área en la que se puede hacer clic en la imagen.
shape=»rect»
Las coordenadas para shape=»rect» vienen en pares, una para el eje x y otra 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 ubican 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:
Ejm
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
shape=»circle»
Para agregar un área circular, primero ubica las coordenadas del centro del círculo:
337,300
Luego especifica el radio del círculo:
44 píxeles
Ahora tienes suficientes datos para crear un área circular en la que se puede hacer clic:
Ejm
<area shape="circle" coords="337, 300, 44" href="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.
Ejm
<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">
Mapa de imagen y Javascript
Un área en la que se puede hacer clic también puede activar una función de JavaScript. Agrega un evento de clic al elemento <area> para ejecutar una función de JavaScript:
Ejm
<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>