El atributo usemap <img> se usa para especificar la imagen como un mapa de imagen del lado del cliente. El mapa de imagen son las áreas de imagen en las que se puede hacer clic. El atributo usemap se utiliza para crear una relación entre la imagen y el mapa.
Sintaxis:
<img usemap="#mapname">
Valores de atributos:
- mapname: se utiliza para contener el nombre del mapa que contiene el carácter hash (#).
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>HTML img usemap Attribute</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>HTML <img> usemap Attribute</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"
alt="" width="300" height="119" usemap="#shapemap" />
<map name="shapemap">
<!-- area tag contained image. -->
<area shape="poly" coords="59, 31, 28, 83, 91, 83" href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png"
alt="Triangle">
<area shape="circle" coords="155, 56, 26" href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"
alt="Circle">
<area shape="rect" coords="224, 30, 276, 82" href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"
alt="Square">
</map>
</body>
</html>
Producción:
Antes de hacer clic en un área específica en la que se puede hacer clic:
Después de hacer clic en un área específica en la que se puede hacer clic:
Navegadores compatibles: los navegadores compatibles con el atributo usemap de HTML <img> se enumeran a continuación:
- Google Chrome
- Borde 12 y superior
- explorador de Internet
- Firefox
- Safari
- Ópera