HTML | <area> 媒体属性

HTML <area> 元素可用于在图像地图中定义可点击的区域。当用户点击图像的特定区域时，可以执行相关操作或导航到链接的目标页面。

媒体属性

<area> 元素具有以下媒体属性：

• alt：规定图像地图区域的替代文本，用于在图像不可见时提供说明。
• coords：规定热点区域的坐标。坐标值的格式取决于 <shape> 属性的值。对于不同的形状，坐标值可能是一对 x 和 y 坐标、一对 x 和 y 坐标以及一对 x 和半径值，或者一对坐标值和一个半径值。
• download：如果指定了该属性，点击区域时，将下载链接的目标资源而不是导航到该资源。
• href：规定要链接到的页面的 URL 或文档片段标识符.
• hreflang：规定链接资源的语言。
• media：规定链接资源适用的媒体查询列表。只有在适用于给定媒体查询列表的情况下，才会按照链接进行导航。
• rel：规定链接和当前文档的关系。常用的值包括 noreferrer、nofollow、noopener、alternate、author、bookmark、external、help、license、next、prev、search 等等。可以使用空格分隔多个值。
• shape：规定区域的形状。常用值包括 default（默认），rect（矩形），circle（圆形），poly（多边形）等。
• target：规定在哪个窗口或框架中打开链接的目标。常用的值包括 _blank（在新窗口中打开），_parent（在父级框架中打开），_self（在相同框架中打开），_top（在顶层窗口打开）等。
• type：规定链接资源的 MIME 类型。

以下是一个示例：

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm" target="_blank">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm" target="_blank">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm" target="_blank">
</map>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" />

在这个示例中，我们创建了一个名为 workmap 的图像地图，包含三个热点区域（一个矩形和两个圆形）。每个区域都有不同的 coords 和目标链接。

通过使用 <map> 和 <area> 元素，可以为图像添加交互性，使用户能够点击特定区域以执行相关操作或导航到链接的目标页面。