La propiedad de mapa de uso de la imagen HTML DOM se utiliza para establecer o devolver el valor del atributo de mapa de uso del elemento de imagen. El atributo usemap define la imagen como un mapa de imagen del lado del cliente. El mapa de imagen es el área de imagen en la que se puede hacer clic. Se utiliza para crear una relación entre la imagen y el mapa. El valor de este atributo es el mismo que el valor del atributo de nombre del elemento del mapa.
Sintaxis:
- Devuelve la propiedad usemap.
imageObject.useMap
- Se utiliza para establecer la propiedad usemap de la imagen.
imageObject.useMap = #mapname
Valores de propiedad :
- #mapname: se utiliza para contener el nombre del mapa que contiene el carácter hash (#).
Valores de retorno: Devuelve un valor de string que representa el valor del atributo usemap que contiene el carácter hash (“#”).
Ejemplo 1: este ejemplo devuelve una propiedad useMap .
HTML
<!DOCTYPE html>
<html>
<body style="text-align:center">
<h2 style="color:green">
GeeksforGeeks
</h2>
<b>
HTML Dom Image useMap Property
</b><br />
<map name="Geeks1">
<area id="Geeks" shape="rect"
coords="0, 0, 110, 100" alt="Geeks"
href=
https://manaschhabra:manaschhabra499@www.geeksforgeeks.org />
</map>
<img id="GFG" src=
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
width="300" height="100"
alt="geeksforgeeks" usemap="#Geeks1">
</br>
<button onclick="GFG()">
Click Here!
</button>
<p id="GEEK!"></p>
<script>
function GFG() {
// Return value of usemap attribute.
var x = document.getElementById("GFG").useMap;
document.getElementById("GEEK!").innerHTML = x;
}
</script>
</body>
</html>
Producción:
devuelve la propiedad usemap
Ejemplo 2: este ejemplo establece la propiedad useMap .
HTML
<!DOCTYPE html>
<html>
<body style="text-align:center">
<h2 style="color:green">
GeeksforGeeks
</h2>
<b>
HTML Dom Image useMap Property
</b>
<map name="Geeks1">
<area id="Geeks" shape="rect"
coords="0, 0, 110, 100" alt="Geeks"
href=
https://manaschhabra:manaschhabra499@www.geeksforgeeks.org />
</map>
<img id="GFG" src=
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
width="300" height="100"
alt="Geeksforgeeks" usemap="#Geeks1">
</br>
<button onclick="GFG()">
Click Here!
</button>
<p id="paraID"></p>
<script>
function GFG() {
// change value of usemap attribute.
var x = document.getElementById(
"GFG").useMap = "#Geeks2";
document.getElementById("paraID")
.innerHTML = "The value of the useMap "
+ "attribute was changed to: " + x;
}
</script>
</body>
</html>
Producción:
Establece la propiedad usemap
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA