新！ 我的 44 页电子书“44 分钟掌握 CSS”已经出版！ 😃

立即获取 →

# area

在 map 内定义交互式区域。

示例： 复制

<img src="/images/world-continents.png" width="320" height="160" orgwidth="320" orgheight="160" usemap="#world-continents">
<map name="world-continents">
  <area title="North America" href="https://en.wikipedia.org/wiki/North_America" shape="poly" coords="48,89,67,69,77,49,140,0,68,0,6,10,4,31,16,69">
  <area title="South America" href="https://en.wikipedia.org/wiki/South_America" shape="poly" coords="48,88,61,74,119,99,95,160,66,159">
  <area title="Europe" href="https://en.wikipedia.org/wiki/Europe" shape="poly" coords="124,49,145,46,158,50,187,43,198,6,146,1,115,21">
  <area title="Africa" href="https://en.wikipedia.org/wiki/Africa" shape="poly" coords="121,53,140,47,169,51,186,77,196,80,188,137,156,136,138,97,118,86">
  <area title="Asia" href="https://en.wikipedia.org/wiki/Asia" shape="poly" coords="166,50,184,77,201,74,215,91,258,108,263,87,283,74,297,8,192,3,191,29,187,46,170,42">
  <area title="Australia" href="https://en.wikipedia.org/wiki/Australia_(continent)" shape="poly" coords="257,107,263,85,314,89,316,137,294,151,249,132,248,114">
</map>

title

定义区域的标题。

"北美"

当鼠标悬停在区域上时，标题将显示。

shape

定义区域的形状。

"rect"

形状为矩形，需要 4 个坐标。

"circle"

形状为圆形，需要 2 个坐标和 1 个半径。

"polygon"

形状为多边形，可以有无限个点。

coords

定义与形状相关的坐标。

"116,104,234,154"

rect 需要两对 x1,y1,x2,y2，第一对定义左上角，第二对定义右下角。

"50,80,20"

circle 需要一对坐标和一个半径 x,y,r。这对坐标定义圆的中心。

"198,374,243,303,428,387,361,624,296,624"

polygon 需要一系列 x,y 坐标对。

href

定义区域的目标。

"https://htmlreference.cn"

您可以传递一个绝对 URL。

"/element/div"

您可以传递一个相对于根域的相对 URL。

"mailto:[email protected]"

您可以使用 mailto 协议。点击区域将打开用户的电子邮件客户端。

target

定义点击区域将显示在哪个选项卡或窗口中。

"_blank"

在新的浏览环境中打开，通常是新标签页。

"_self"

在当前标签页中打开。

"_parent"

在父浏览环境中打开，如果没有父环境，则在 _self 中打开。

"_top"

在顶层浏览环境中打开，如果没有顶层环境，则在 _self 中打开。