html5+css3(十一)图片热点(图像地图)

图片热点(图像地图)

图像热点：给一张图片加多个链接，默认情况下，一张图只能加一个链接。

 

1、标记结构：

<img  src = “images/01.jpg”  usemap = “#Map”  />

<map  id = “Map”  name = “Map”>

<area  shape = “热区形状”  coords = “热区坐标”  href = “链接地址”  />

<area  shape = “热区形状”  coords = “热区坐标”  href = “链接地址”  />

<area  shape = “热区形状”  coords = “热区坐标”  href = “链接地址”  />

</map>

2、<area>标记的常用属性

1. Shape：热区的形状，取值：rect(矩形)、circle(圆形)、polygon(多边形)
2. Coords：执区的坐标(位置)
   1. 1. 如果 shape = rect 时，那么，coords = “x1,y1,x2,y2” 例如：coords = “50,50,200,150”
         1. 1. (x1,y1)为矩形左上角的坐标值，(x2,y2)为矩形右下角的坐标值
      2. 如果 shape = circle 时，那么， coords = “x,y,r” ，其中(x,y)为圆心坐标，r为半径