参考资料

1. HTML DOM 事件
2. HTML DOM改变单元格的内容
3. HTML DOM单元格内容垂直对齐
4. HTML DOM一个行的innerHTML
5. HTML DOM 返回文档的标题实例
6. HTML DOM 重置表单
7. HTML DOM 对image排版
8. HTML DOM 方法

HTML DOM 返回图像映射的某个区域的href 实例

HTML DOM 图像映射区域 href 属性

介绍

HTML DOM 中的 href 属性用于获取或设置图像映射(<map>)中某个区域(<area>)的超链接目标。

相关标签

• <map>: 定义客户端图像映射

• <area>: 定义图像映射中的可点击区域

用法

// 获取href属性
var hrefValue = areaElement.href;

// 设置href属性
areaElement.href = "newURL";

实例

<img src="planets.jpg" width="145" height="126" usemap="#planetmap">

<map name="planetmap">
  <area id="venus" shape="circle" coords="90,58,3" href="venus.htm">
</map>

<script>
  var area = document.getElementById("venus");
  console.log(area.href); // 输出: venus.htm
  
  area.href = "new_venus.htm"; // 修改链接
</script>

功能

• 获取或设置图像映射区域的链接目标

• 可用于动态修改图像映射的导航行为

• 支持相对路径和绝对路径

CSS 扩展

虽然 <area> 元素本身不支持直接样式化，但可以通过以下方式增强视觉效果：

/* 鼠标悬停时改变光标样式 */
area:hover {
  cursor: pointer;
}

/* 通过JavaScript添加的类来样式化 */
.highlight-area {
  outline: 2px solid red;
}

JavaScript 添加样式类示例:

area.addEventListener('mouseover', function() {
  this.classList.add('highlight-area');
});