在图片中绑定多个点击事件（应用场景地图中点击地方跳转）_一张图片如何根据不同位置点击实现不同事件-CSDN博客

本文链接：https://blog.csdn.net/m0_71615654/article/details/127315345

本文介绍如何使用HTML中的map和area标签创建可点击的地图热点。通过不同形状定义交互区域，并演示了如何利用JavaScript动态设置坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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。【即区域的左下角坐标(x1,y1)+右上角坐标(x2,y2)组合：coords="x1,y1,x2,y2"】当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);