area元素(图形地图的超级链接)

<area>--</area>

浏览器支持情况

area元素用于定义图形地图上的超链接。area元素要map元素中使用。使用area元素可以定义多四角形(rect)、角形(poly)、圆形(circle)等特定形状作为超链接领域。

当使用area元素指定了多个链接领域时,优先使用最初指定的领域。

属性

1、alt内容属性
用于指定图形地图的可替代内容。
2、coords内容属性
指定超链接里的链接领域的坐标。
3、shape内容属性
用于指定超级链接领域的形状种类。
【shape属性的可选值:】
  • circle:指定图形为圆形,需要3个整数,1:图形的左端到圆心的距离,2:图形的上端到圆心的距离,3:圆的半径(0以上的整数)。
  • poly:指定多角形。使用成对的整数(图形左端到顶点的距离,图形上端到顶点的距离)代表多角形的顶点坐标。
  • rect:指定四角形。需要指定4个整数,1:图形左端到四角形左端的距离;2:图形上端到四角形上端的距离;3:图形的左端到四角形右端的距离;4、图形的上端到四角形下端的距离。
4、href内容属性
用于指定超链接的URL。
5、target内容属性
打开目标URL的位置。
6、rel内容属性
指定表示当前文档与目标URL关系的关键词。
7、media内容属性
指定目标URL的媒介类型。
8、hreflang内容属性
指定目标URL的基准语言。
9、type内容属性
指定目标URL的MIME类型。

使用例

<h1>请选择合适的形状:</h1>

<img src="../html5/material/images/area.gif" usemap="#sample" alt="红色有孔方形、绿色的圆、蓝色三角形" width="400" height="150">

<map name="sample">

<area href="www.webkkl.com" shape="rect" alt="红色方形的孔" coords="50,50,100,100" >

<area href="http://www.yahoo.co.jp/" shape="rect" alt="红色方形" coords="25,25,125,125">

<area href="https://www.google.co.jp/" shape="circle" alt="绿色的圆" coords="200,75,50">

<area href="#" shape="poly" alt="蓝色三角形" coords="310,26,267,120,370,110" target="_blank">

</map>

浏览器上的显示结果↓



请选择合适的形状:

红色有孔方形、绿色的圆、蓝色三角形 红色方形的孔 红色方形 绿色的圆 蓝色三角形
元素
area yes yes yes yes yes

关联内容