图像热点地图
先写类型为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>
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果