HTML map 标签使用详解 - Imin
徐向博 / Imin.

HTML map 标签使用详解

作者:徐向博时间:2018-01-09浏览:227分类:前端笔记来源:原创

在图片中标注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);  

完。


博客首页 会员登录 资源共享 关于博主 反馈建议 LinkedIn
© IMIN 版权所有. 豫ICP备15008901号