HTML | 对象 usemap 属性

在 HTML 中，<img>、<object>和<button>等元素都支持使用 usemap 属性来指定与之相关联的图像映射（Image Map）。

图像映射

图像映射是图像的一种交互性扩展，它可以将图像分成多个可以点击的区域，每个区域可以链接到不同的 URL 上或执行不同的 JavaScript 等交互行为。

图像映射可以分为两种类型：

• 矩形映射：通过指定左上角和右下角的坐标来定义的矩形区域。
• 多边形映射：通过指定多个坐标点来定义的多边形区域。

以下是一个简单的矩形映射示例：

<img src="map.png" usemap="#Map">

<map name="Map">
  <area shape="rect" coords="0,0,100,100" href="http://www.example.com">
</map>

在这个示例中，<img> 元素使用 src 属性来指定显示的图像，而 usemap 属性则指定了与之相关联的图像映射，这里的值为 #Map。接下来就需要使用 <map> 元素来定义图像映射，其中 name 属性值需要与 usemap 属性值相同。

<area> 元素是图像映射的核心元素，它通过 shape 属性来指定区域形状，本例中使用矩形形状 rect，而 coords 属性指定了矩形坐标的左上角和右下角分别为 (0,0) 和 (100,100)，最后使用 href 属性来指定跳转的链接地址。

对象 usemap 属性

除了普通的图像映射外，<object> 元素也支持使用 usemap 属性来指定与之相关联的图像映射。但与 <img> 元素不同的是，<object> 元素的图像映射必须是 SVG 或者 HTML 格式。

以下是一个使用 <object> 元素来引入 SVG 格式图像的示例：

<object data="example.svg" type="image/svg+xml" usemap="#Map">
  Your browser does not support SVG
</object>

<map name="Map">
  <area shape="rect" coords="0,0,100,100" href="http://www.example.com">
</map>

与 <img> 类似，<object> 元素使用 data 属性来指定引入的图像，type 属性则指定图像的 MIME 类型为 SVG 格式。而 usemap 属性同样用于定义与之相关联的图像映射，这里的值为 #Map。

在本例中，<area> 元素的定义和普通的使用 <img> 元素的图像映射并没有什么区别。需要注意的是，由于 SVG 是一种矢量图像格式，因此图像映射中的坐标系也是基于矢量坐标系而不是像素坐标系。

总结

使用 usemap 属性可以为图像和对象元素添加交互性，将图像映射成多个可以点击的区域，为用户提供更好的交互体验。除了常规的矩形映射外，还可以使用多边形映射来创建更复杂的交互区域。在使用 <object> 元素引入 SVG 图像时，同样也可以使用 usemap 属性来定义与之相关联的图像映射。