解决方案:把图片要点击的点生成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>
效果如下: