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

参考资料

1. HTML DOM改变表格边框的宽度
2. HTML DOM 节点列表长度
3. HTML DOM为表格创建一个标题
4. HTML DOM 返回一个锚的名字 实例
5. HTML DOM改变表格的cellpadding和cellspacing
6. HTML DOM 返回一个button的value 实例
7. HTML DOM 事件
8. HTML DOM 返回和设置链接的href属性实例

HTML DOM 图像映射区域 port 实例

1. 基本概念

• 表示图像映射中

  元素的port属性

• 用于定义客户端图像映射中可点击区域的坐标

2. 相关标签

• - 定义可点击区域

• - 关联图像映射的图片

3. 主要属性

• coords - 定义区域坐标

• shape - 定义区域形状(rect, circle, poly)

• href - 定义链接目标

• alt - 替代文本

4. 基本用法

<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="0,0,50,50" href="page1.html" alt="Area 1">
  <area shape="circle" coords="100,100,30" href="page2.html" alt="Area 2">
</map>

5. DOM 访问示例

// 获取第一个area元素
var area = document.getElementsByTagName('area')[0];
// 获取port属性值
var portValue = area.port;

6. 功能特点

• 定义图像上可点击的热区

• 支持多种形状的区域

• 可与JavaScript交互

• 支持链接跳转

7. CSS 扩展

/* 鼠标悬停效果 */
area:hover {
  cursor: pointer;
}

/* 通过CSS改变热区外观 */
img[usemap] {
  border: none;
}

8. 注意事项

• 坐标值以图像左上角为原点(0,0)

• 不同shape的coords格式不同

• 现代网页更常用CSS实现的图像映射替代方案