图像热点地图

先写类型为circle的图像热点地图横坐标就是宽度值，先用Adobe Fireworks CS6对图片进行切片，可以看出切片的区域宽为70，所以coords=",,35"（半径）

然后在确定圆心位置，填入coords="160,63,35"

代码如下：

<!-- 图像热点地图 1.要有图像标签img 2.要有地图标签map 3.两个标签之间建立关联关系-usemap="#wmq"一定要加#号-> --> <div class="box"> <img src="public/fly.jpg" usemap="#mymap1"> <map name="mymap1"> <!-- circle：定义一个圆形区域，coords属性设置值为圆心坐标及半径，前两个参数分别为圆心的横、纵坐标，第三个参数为半径。 --> <area shape="circle" coords="160,63,35" href ="http://www.baidu.com" alt="" /> <area shape="circle" coords="235,61,34" href="http://www.1ppt.com/moban/ppt_moban_8.html" alt=""> <area shape="circle" coords="36,293,36" href="http://www.baidu.com" alt=""> <area shape="circle" coords="367,344,33" href="http://www.baidu.com" alt=""> </map> </div>

代码演示：可以看出图像右眼明显有黑色加粗的圆圈

同理可以写出矩形的图像热点地图，coords="269,27,435,263"前两个为矩形左上角的坐标，后两个为右下角坐标

<div class="box"> <img src="public/qqline.jpg" usemap="#wmq"> <map name="wmq"> <area shape="rect" coords="46,27,212,263" href="http://www.baidu.com" alt=""> <area shape="rect" coords="269,27,435,263" href="http://www.baidu.com" alt=""> <area shape="rect" coords="484,27,650,263" href="http://www.baidu.com" alt=""> </map> </div>

代码演示：