前端怎么对一张图片特定某些点进行点击事件（image-map）-CSDN博客

本文链接：https://blog.csdn.net/han_xiao_xiao/article/details/126665316

解决方案：把图片要点击的点生成map
推荐去个网站
https://www.image-map.net/
在这里插入图片描述

生成map代码
在这里插入图片描述

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="device.95521e50.png" usemap="#image-map">

<map name="image-map">
    <area target="" alt="" title="" href="" coords="307,230,22" shape="circle">
    <area target="" alt="" title="" href="" coords="229,232,21" shape="circle">
    <area target="" alt="" title="" href="" coords="102,231,25" shape="circle">
    <area target="" alt="" title="" href="" coords="611,259,18" shape="circle">
    <area target="" alt="" title="" href="" coords="647,233,20" shape="circle">
    <area target="" alt="" title="" href="" coords="725,230,19" shape="circle">
    <area target="" alt="" title="" href="" coords="844,232,20" shape="circle">
    <area target="" alt="" title="" href="" coords="78,529,19" shape="circle">
    <area target="" alt="" title="" href="" coords="218,466,19" shape="circle">
    <area target="" alt="" title="" href="" coords="324,462,22" shape="circle">
    <area target="" alt="" title="" href="" coords="547,465,16" shape="circle">
    <area target="" alt="" title="" href="" coords="548,510,20" shape="circle">
    <area target="" alt="" title="" href="" coords="549,568,16" shape="circle">
    <area target="" alt="" title="" href="" coords="594,466,17" shape="circle">
    <area target="" alt="" title="" href="" coords="594,510,17" shape="circle">
    <area target="" alt="" title="" href="" coords="594,569,16" shape="circle">
    <area target="" alt="" title="" href="" coords="734,467,18" shape="circle">
    <area target="" alt="" title="" href="" coords="874,529,16" shape="circle">
</map>

html网页代码：

<html>
<head></head>
<body>
<img src="device.95521e50.png" usemap="#image-map">

<map name="image-map" id="planetmap">
    <area coords="307,230,22" shape="circle" onclick="getCorePhoth('1')">
    <area coords="229,232,21" shape="circle" onclick="getCorePhoth('2')">
    <area coords="102,231,25" shape="circle" onclick="getCorePhoth('3')">
    <area coords="611,259,18" shape="circle" onclick="getCorePhoth('4')">
    <area coords="647,233,20" shape="circle" onclick="getCorePhoth('5')">
    <area coords="725,230,19" shape="circle" onclick="getCorePhoth('6')">
    <area coords="844,232,20" shape="circle" onclick="getCorePhoth('7')">
    <area coords="78,529,19"   shape="circle" onclick="getCorePhoth('8')">
    <area coords="218,466,19" shape="circle" onclick="getCorePhoth('9')">
    <area coords="324,462,22" shape="circle" onclick="getCorePhoth('10')">
    <area coords="547,465,16" shape="circle" onclick="getCorePhoth('11')">
    <area coords="548,510,20" shape="circle" onclick="getCorePhoth('12')">
    <area coords="549,568,16" shape="circle" onclick="getCorePhoth('13')">
    <area coords="594,466,17" shape="circle" onclick="getCorePhoth('14')">
    <area coords="594,510,17" shape="circle" onclick="getCorePhoth('15')">
    <area coords="594,569,16" shape="circle" onclick="getCorePhoth('16')">
    <area coords="734,467,18" shape="circle" onclick="getCorePhoth('17')">
    <area coords="874,529,16" shape="circle" onclick="getCorePhoth('18')">
</map>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
    $('img[usemap]').rwdImageMaps();
});
function getCorePhoth(type){
	alert(type);
}
</script>
</html>

效果如下：
在这里插入图片描述