HTML map 标签使用详解

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_34518793/article/details/79014028

在图片中标注usemap：

<img src=""img.jpg" usemap="im_map" />

定义map：

<map id="im_map" name="im_map">
<area shape="rect" coords="0,0,100,100" href="url.html" />
</map

map标签定义map，area标签定义可点击的热点，area属性：

shape：定义热点形状，可选参数 rect(矩形)、circle(圆形)、poligon(自定义形状)。

coords：定义形状路径：

当shape=rect时，四个数字依次为：起点X、起点Y、终点X、终点Y

当shape=circle时，三个数字依次为：中心点X、中心点Y、半径

当shape=poligon时，可定义多个路径点，依次为：起点X、起点Y、路径1X、路径1Y、路径2X、路径2Y......

href定义点击跳转的地址。

有时候需要动态的为coords属性赋值，在JS中控制coords，demo使用JQ写法：

var mapStartX = 0;
var mapStartY = 0;
var mapEndX = 100;
var mapEndY = 100;
var mapFill = mapStartX + ','+ mapStartY + ','+ mapEndX + ','+ mapEndY;
var im_map = $('#im_map').find('area');
im_map.attr('coords',mapFill);

完。

原文地址：http://blog.xuxiangbo.com/im-17.html