定义热点区域

　　热点区域就是为图像的局部区域定义超链接，当点击该热点区域时，会触发超链接，并跳转到其他网页或者页面的位置。

　　热点区域是一种特殊的超链接形式，常用来在图像中设置导航，用户可以在一幅图定义多个热点区域，以实现单击不同的热区连接到不同的页面。

　　定义热点区域，需要使用<map>和<area>标签来配合使用

　　　　<map>：定义热点区域，包含必须的ID属性，定义热点区域的ID，或者定义可选的name的值属性，也可以作为一个句柄，与热点图像进行绑定

　　　　<area>：定义图像映射中的区域，area匀速必须嵌套在<map>标签中，该标签包含一个必须设置的属性alt，定义热点区域的替换文本。该标签还包含多个可选的属性，说明如表

　　　　<img>中的usemap属性可引用<map>中的id或 name属性（根据浏览器），所以应同时向<map>添加id和name属性，且设置相同的值。

属性	取值	说明
coords	坐标值	定义可点击区域（鼠标敏感的区域）的坐标
href	URL	定义此区域的目标URL
nohref	nohref	从图像映射除某个区域
shape	default、rectangle（矩形） circle（圆形） polygon（多边形）	定义区域的形状
trarget	_blank　　_parent　　_self　　_top	规定在何处打开href属性指定的位置

圆形：shape=“circle” ,coords=“x,y,z”

　　这里的x和y定义了圆心的位置（"0,0" 是图像左上角的坐标），r是以像素为单位的

矩形：shape=“rectangle” ,coords="x1,y1,x2,y2"

　　第一个坐标是矩形的一个叫的顶点坐标，另一对坐标是对角的顶点坐标，（“0,0”是定义图像左上角的顶点）

多边形：shape=“polygon” ,coords="x1,y1,x2,y2......."

　　每一个“x，y”坐标都定义多边形的一个顶点，（“0,0”是图像的左上角的坐标。）

 

<div class="map">
        <img src="1.jpg" alt="df" usemap="Map" >
        <map name="Map" id="Map">
            <area shape="circle" coords="200,300,100" href="https://www.baidu.com/s?wd=西藏自治区" alt="西藏自治区">
        </map>
    </div>