La colección de áreas de mapa en HTML DOM se utiliza para devolver la colección de todos los elementos <area> en un mapa de imagen. Los elementos del área se ordenan tal como aparecen en el código fuente.
Sintaxis:
mapObject.areas
Propiedades: Devuelve el número de área en la colección de elementos.
Métodos: la colección de áreas del mapa DOM contiene tres métodos que se enumeran a continuación:
- [índice]: se utiliza para devolver el elemento <form> del índice especificado. El valor del índice comienza con 0. Se devuelve un valor NULL si el valor del índice está fuera de rango.
- item(index): Se utiliza para devolver el elemento <form> del índice especificado. El valor del índice comienza con 0. Se devuelve un valor NULL si el valor del índice está fuera de rango. Este método funciona de manera similar al método anterior.
- namedItem(id): se utiliza para devolver el elemento <form> de la colección que coincide con el id especificado. Se devuelve el valor NULL si la identificación no existe.
Valor de retorno: devuelve un objeto HTMLCollection que representa todos los elementos <area> en un mapa de imagen en el documento. Los elementos de la colección se ordenan de la forma en que aparecen en el código fuente.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Map areas Collection
</title>
</head>
<body>
<h2>
GeeksForGeeks
</h2>
<h2>HTML DOM Map areas Collection</h2>
<button onclick = "GFG()">
Click Here!
</button>
<p></p>
<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">
<p id = "GEEK!"></p>
<script>
function GFG() {
var x = document.getElementById("Geeks").areas.length;
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:
Navegadores compatibles: los navegadores compatibles con HTML DOM Map areas Collection se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- safari de manzana
- Ó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