参考资料

1. HTML DOM 节点列表长度
2. HTML DOM 根节点childNodes 和 nodeValue
3. HTML DOM单元格内容水平对齐
4. HTML DOM 返回一个button的value 实例
5. HTML DOM在下拉列表中选择多个选项
6. HTML DOM一个行的innerHTML
7. HTML DOM 返回image的name
8. HTML DOM 返回一个button所属表的ID 实例

HTML DOM 图像映射区域的主机名和端口实例

详细介绍

HTML DOM 中的 area 元素可以通过 hostname 和 port 属性获取或设置图像映射区域链接的主机名和端口部分。

标签

<area>

用法

// 获取主机名
var host = areaElement.hostname;

// 设置主机名
areaElement.hostname = "new.example.com";

// 获取端口
var port = areaElement.port;

// 设置端口
areaElement.port = "8080";

实例

<img src="planets.jpg" usemap="#planetmap" alt="Planets">
<map name="planetmap">
  <area id="earth" shape="rect" coords="0,0,82,126" href="http://example.com:8080/earth" alt="Earth">
</map>

<script>
  var area = document.getElementById("earth");
  console.log(area.hostname); // 输出: "example.com"
  console.log(area.port); // 输出: "8080"
  
  // 修改主机名和端口
  area.hostname = "new.example.org";
  area.port = "3000";
</script>

功能

• hostname 属性返回或设置链接的域名部分

• port 属性返回或设置链接的端口号部分

• 这些属性可用于动态修改图像映射区域的链接目标

CSS 扩展

虽然 area 元素本身不支持直接样式化，但可以通过 CSS 伪类来指示活动状态：

area:focus {
  outline: 2px solid blue;
}

/* 通过 JavaScript 添加类来样式化 */
.highlight-area {
  border: 1px dashed red;
}

注意：area 元素的可视化样式有限，通常需要通过 JavaScript 和 CSS 结合其他元素来实现更丰富的视觉效果。