La propiedad de nombre de mapa en HTML DOM se usa para establecer o devolver el valor del atributo de nombre de un elemento de mapa. Este atributo especifica el nombre de la imagen de mapeo. Este atributo está asociado con el atributo usemap <img>. Crea una relación entre el elemento <image> y <map>.
Sintaxis:
- Devuelve la propiedad del nombre.
mapObject.name
- Se utiliza para establecer la propiedad de nombre.
mapObject.name = name
Valores de propiedad:
- nombre: contiene el nombre de un mapa de imagen.
Valor devuelto: Devuelve un valor de string que representa el nombre del elemento del mapa.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Map name Property
</title>
</head>
<body>
<h2>
GeeksForGeeks
</h2>
<h3>
HTML DOM Map name Property
</h3>
<h4>Click the button</h4>
<map id = "Geeks" name = "Geeks">
<area shape = "rect" coords = "0, 0, 110, 100"
alt = "Geeks" href =
"https://media.geeksforgeeks.org/wp-content/uploads/a1-21.png">
<area shape = "rect" coords = "110, 0, 190, 100"
alt = "For" href =
"https://media.geeksforgeeks.org/wp-content/uploads/a1-22.png">
<area shape = "rect" coords = "190, 0, 300, 100"
alt = "GEEKS" href =
"https://media.geeksforgeeks.org/wp-content/uploads/a1-24.png">
</map>
<img src =
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
width = "300" height = "100" alt="GFG" usemap = "#Geeks">
<br><br>
<button onclick = "GFG()">
Click Here!
</button>
<p id = "GEEK!"></p>
<script>
function GFG() {
var x = document.getElementById("Geeks").name;
document.getElementById("GEEK!").innerHTML = x;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Map name Property
</title>
</head>
<body>
<h2>
GeeksForGeeks
</h2>
<h3>
HTML DOM Map name Property
</h3>
<h4>Click the button</h4>
<map id = "Geeks" name = "Geeks">
<area shape = "rect" coords = "0, 0, 110, 100"
alt = "Geeks" href =
"https://media.geeksforgeeks.org/wp-content/uploads/a1-21.png">
<area shape = "rect" coords = "110, 0, 190, 100"
alt = "For" href =
"https://media.geeksforgeeks.org/wp-content/uploads/a1-22.png">
<area shape = "rect" coords = "190, 0, 300, 100"
alt = "GEEKS" href =
"https://media.geeksforgeeks.org/wp-content/uploads/a1-24.png">
</map>
<img src =
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
width = "300" height = "100" alt="GFG" usemap = "#Geeks">
<br><br>
<button onclick = "GFG()">
Click Here!
</button>
<p id = "GEEK!"></p>
<script>
function GFG() {
var x = document.getElementById("Geeks").name
= "Hello Geeks";
document.getElementById("GEEK!").innerHTML
= "The name was changed to " + x;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad de nombre del mapa DOM de HTML se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA