参考资料

1. HTML DOM 返回一个区域的href属性的querystring部分 实例
2. HTML DOM 改变一个iframe的src
3. HTML DOM 事件
4. HTML DOM改变表格的cellpadding和cellspacing
5. HTML DOM 返回图像映射某个区域的坐标实例
6. HTML DOM 返回表单中的enctype属性的值
7. HTML DOM 返回一个button的value 实例
8. HTML DOM 打开输出流，向流中输入文本实例

HTML DOM 返回的主机名：图像映射的某个区域的端口 实例

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 结合其他元素来实现更丰富的视觉效果。