参考资料

1. HTML DOM 返回一个区域的href属性的querystring部分 实例
2. HTML DOM 创建一个链接指向一个低分辨率的image
3. HTML DOM 返回文档中第一个锚的 innerHTML
4. HTML DOM 返回一个iframe中的frameborder属性的值
5. HTML DOM 鼠标的坐标？
6. HTML DOM 哪个鼠标键被点击了？
7. HTML DOM 返回image的替代文本
8. HTML DOM 改变image的src

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

HTML DOM 图像映射区域 pathname 属性

介绍

pathname 属性返回图像映射中某个区域的路径部分（即 URL 中域名之后的部分）。

标签

与 <area> 标签相关，该标签定义图像映射中的可点击区域。

用法

var path = areaObject.pathname;

实例

<img src="planets.jpg" usemap="#planetmap" alt="Planets">

<map name="planetmap">
  <area id="venus" shape="circle" coords="124,58,8" 
    href="venus.html" alt="Venus">
</map>

<script>
  var area = document.getElementById("venus");
  console.log(area.pathname); // 输出: "/venus.html"
</script>

功能

• 获取图像映射区域链接的路径部分

• 可用于动态修改或检查区域链接

• 返回的值不包括协议、域名或查询字符串

CSS 扩展

虽然 CSS 不能直接操作 pathname 属性，但可以基于路径名来设置样式：

/* 假设有 data-path 属性存储路径 */
area[data-path="/venus.html"] {
  outline: 2px solid red;
}

JavaScript 中可以这样设置：

area.setAttribute('data-path', area.pathname);