标签：map 路径 shape 点击 HTML coords var 详解

1、在图片中标注usemap

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

2、定义map

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</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写法：

//使用js控制coords，绘制map热点
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); 

应用场景：多用于在图片上设置点击事件，点击图片某一处触发相关操作。

参考demo

https://www.w3cschool.cn/htmltags/tag-map.html
在此页面点击“尝试一下”，然后点击图片的几处，出来的效果不同

标签：map,路径,shape,点击,HTML,coords,var,详解
来源： https://www.cnblogs.com/huihuihero/p/16457183.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。