HTML DOM Map 对象
JavaScript基础 2022-05-13 16:21:21小码哥的IT人生shichen
HTML DOM Map 对象
Map 对象
Map 对象表示 HTML <map> 元素。
访问 Map 对象
您可以通过使用 getElementById() 来访问 <map> 元素：
var x = document.getElementById("myMap");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h3>演示如何访问 MAP 元素</h3>
<img src="/i/eg_planets.jpg" border="0" usemap="#myMap" alt="Planets" />
<map name="myMap" id="myMap">
<area
shape="circle"
coords="180,139,14"
href ="/demo/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/demo/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/demo/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p>点击按钮来获得图像映射中 area 元素的数目。</p>
<p id="demo"></p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var x = document.getElementById("myMap").areas.length;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
创建 Map 对象
您可以通过使用 document.createElement() 方法来创建 <map> 元素：
var x = document.createElement("MAP");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h3>演示如何访问 MAP 元素</h3>
<img src="/i/eg_planets.jpg" border="0" usemap="#myMap" alt="Planets" />
<p>点击按钮来创建 IMAGE-MAP 以及链接到 "venus.htm" 的 AREA 元素：</p>
<p id="demo"></p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var x = document.createElement("MAP");
x.setAttribute("id", "myMap");
x.setAttribute("name", "myMap");
document.body.appendChild(x);
var y = document.createElement("AREA");
y.setAttribute("href", "/demo/example/html/venus.html");
y.setAttribute("shape", "circle");
y.setAttribute("coords", "180,139,14");
document.getElementById("myMap").appendChild(y);
document.getElementById("demo").innerHTML = "已创建 MAP，现在您可以在图像中点击 venus 区域。";
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Map 对象集合
| 集合 | 描述 |
|---|---|
| areas | 返回 image-map 中所有 <area> 元素的集合。 |
| images | 返回与 image-map 相关联的所有 <img> 和 <object> 元素的集合。 |
Map 对象属性
| 属性 | 描述 |
|---|---|
| name | 设置或返回 image-map 的 name 属性值。 |
