以下是一个简单的例子，演示如何使用 JavaScript 获取和操作与 <map> 元素关联的 Map 对象：
<!DOCTYPE html>
<html>
<head>
<title>Map 对象示例</title>
</head>
<body>
<!-- 图像及其关联的地图 -->
<img src="worldmap.jpg" alt="世界地图" usemap="#worldMap" id="mapImage">
<map name="worldMap" id="mapObject">
<area shape="rect" coords="0,0,100,100" href="#" alt="North America">
<area shape="rect" coords="100,0,200,100" href="#" alt="Europe">
<area shape="rect" coords="0,100,100,200" href="#" alt="South America">
<area shape="rect" coords="100,100,200,200" href="#" alt="Africa">
</map>
<!-- JavaScript 代码 -->
<script>
function updateMapArea() {
// 获取 Map 对象
var mapObject = document.getElementById('mapObject');
// 获取地图区域列表
var mapAreas = mapObject.getElementsByTagName('area');
// 修改第一个地图区域的属性
mapAreas[0].setAttribute('coords', '50,50,150,150');
// 在控制台打印修改后的地图区域属性
console.log("修改后的地图区域坐标：" + mapAreas[0].getAttribute('coords'));
}
</script>
<!-- 按钮触发 JavaScript 函数 -->
<button onclick="updateMapArea()">更新地图区域</button>
</body>
</html>
在这个例子中，我们创建了一个包含世界地图图像和相关地图的 HTML 页面。通过 JavaScript，我们使用 document.getElementById 方法获取了与 <map> 元素关联的 Map 对象，并通过 getElementsByTagName 方法获取了地图区域列表。然后，我们通过修改地图区域的属性（这里是坐标 coords）来更新第一个地图区域。点击页面上的按钮将触发 updateMapArea 函数，从而更新地图区域的坐标。
转载请注明出处：http://www.zyzy.cn/article/detail/4417/HTML