参考资料

1. HTML DOM 返回一个链接的type属性的值实例
2. HTML DOM 返回一个iframe中的frameborder属性的值
3. HTML DOM 返回一个表单中所有元素的value 实例
4. HTML DOM 返回图像映射的某个区域的pathname 实例
5. HTML DOM 元素
6. HTML DOM 返回image的name
7. HTML DOM 修改
8. HTML DOM 被按下的键盘键的keycode？

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');
});