更新时间:2014年8月20日

map元素(图形地图)

<map name=" ">~<map>

map元素中使用area元素可以用于定义图形地图。所谓的图形地图就是把使用img元素object元素表示的图形中的特定几何领域(如:四角形、圆形、多角形等)定义成超级链接。map元素中配置其子元素area元素。area元素的href属性用于定义链接地址。shape属性用于指定连接领域的形状,coords属性用于指定连接领域的坐标

制作图形地图时,首先,在map元素中,使用name内容属性指定对象的名字。这里name内容属性是必须的,而且其值中不能含有空格也不能是空值。其次,表示图形的img元素、object元素的usemap内容属性中,要设置map元素的哈希(hash)参照名。

使用例

<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>

浏览器上的显示结果↓



请选择合适的形状:

红色有孔方形、绿色的圆、蓝色三角形 红色方形的孔 红色方形 绿色的圆 蓝色三角形

浏览器支持情况

元素
map yes yes yes yes yes