HTML <area> href 属性

在 HTML 中，<area /> 元素用于定义图像地图的可点击区域。通过使用 <area /> 元素，您可以将图像分成多个可点击区域，并为每个区域定义不同的目标链接。<area /> 元素的 href 属性用于指定每个区域的目标链接。

语法

<area /> 元素的基本语法如下：

<map name="mapname">
  <area shape="rect" coords="x1,y1,x2,y2" href="url1">
  <area shape="circle" coords="x,y,r" href="url2">
  <area shape="poly" coords="x1,y1,x2,y2,x3,y3,..." href="url3">
</map>

• mapname：定义图像地图的名称，与元素的usemap属性相对应。
• shape：定义可点击区域的形状，可以是 "rect"（矩形）、"circle"（圆形）或 "poly"（多边形）。
• coords：定义可点击区域的坐标信息，具体格式取决于形状的不同。
• href：定义可点击区域的目标链接。

示例

下面是一个简单的示例，展示如何使用 <area /> 元素创建一个图像地图，并为不同区域定义不同的目标链接：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Image Map Example</title>
</head>
<body>
  <h1>Clickable Image Map Example</h1>
  <img src="map.jpg" usemap="#mapname" alt="Map">
  
  <map name="mapname">
    <area shape="rect" coords="0,0,50,50" href="page1.html">
    <area shape="circle" coords="100,100,50" href="page2.html">
    <area shape="poly" coords="200,200,250,250,300,200" href="page3.html">
  </map>
</body>
</html>

在上面的示例中，我们定义了一个包含三个可点击区域的图像地图，并为每个区域指定了不同的目标链接。用户点击不同区域时，会跳转到不同的页面。

总结

通过使用 <area /> 元素的 href 属性，您可以轻松地为图像地图的不同区域指定不同的目标链接，从而实现更加灵活和交互性的页面设计。希望本文能帮助您更好地理解和应用 <area /> 元素的 href 属性。