是否可以在图像的特定点上设置事件？

Question

我有这样的图像：

我要做的就是在控制台中打印一条消息，如下所示：

console.log("#1 point is hovered");
console.log("#2 point is hovered");

请参阅？我想检测鼠标悬停在图像上的每个点上。做这样的事情可能吗？

Answer 1

HTML中有<map>和<area>个标记：

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

<map id="imagemap" name="planetmap">
  <area shape="circle" coords="104,101,15" href="first.htm" alt="First Point">
  <area shape="circle" coords="331,243,15" href="second.htm" alt="Second Point">
</map>

https://www.w3schools.com/tags/tag_map.asp

因此，您可以将事件附加到任何已定义的区域（圆形，多边形或矩形），并使用javascript对其进行操作。见下面的例子：

＆＃13;

＆＃13;

var points = document.querySelectorAll('#imagemap area');
result = document.getElementById('result');

Array.prototype.slice.call(points).forEach(function(point) {

  point.addEventListener('mouseenter', function() {
    result.innerHTML = this.alt + '<br>' + result.innerHTML;
  });

});

＆＃13;

#result {
  background-color: #eee;
  padding: 10px 15px;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  max-height: 50px;
  overflow: auto;
}

＆＃13;

<img src="https://i.stack.imgur.com/Uy5nT.jpg" width="454" height="340" alt="Planets" usemap="#planetmap">

<map id="imagemap" name="planetmap">
  <area shape="circle" coords="104,101,15" href="first.htm" alt="First Point">
  <area shape="circle" coords="331,243,15" href="second.htm" alt="Second Point">
</map>

<div id="result"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用 imagemap 为此，并使用特定坐标使用map和area添加链接并获取其坐标。

看看下面的例子：

$('area').each(function() {
  $(this).on('mouseover', function() {
    console.log($(this).attr('coords'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imagemap">
  <img src="http://www.onextrapixel.com/examples/image-map/images/weblogo.jpg" alt="" usemap="#logos">

  <map name="logos">
    <area shape="circle" coords="68,56,33" href="http://www.stumbleupon.com/" title="StumbleUpon" alt="StumbleUpon">
    <area shape="rect" coords="220,19,306,54" href="http://www.youtube.com/" title="Youtube" alt="Youtube">
    <area shape="rect" coords="367,32,516,84" href="http://www.google.com/" title="Google" alt="Google">
    <area shape="rect" coords="556,12,639,115" href="http://www.wikipedia.com/" title="Wikipedia" alt="Wikipedia">
    <area shape="rect" coords="128,62,244,114" href="http://www.skype.com/" title="Skype" alt="Skype">
    <area shape="rect" coords="301,103,444,136" href="http://www.yahoo.com/" title="Yahoo" alt="Yahoo">
    <area shape="rect" coords="25,158,135,207" href="http://www.ebay.com/" title="eBay" alt="eBay">
    <area shape="rect" coords="180,147,271,175" href="http://www.flickr.com/" title="Flickr" alt="Flickr">
    <area shape="rect" coords="299,166,379,208" href="http://www.digg.com/" title="Digg" alt="Digg">
    <area shape="circle" coords="500,184,32" href="http://wordpress.org/" title="Wordpress.org" alt="Wordpress.org">
    <area shape="rect" coords="599,142,667,209" href="http://www.blogger.com/" title="Blogger" alt="Blogger">
    <area shape="default" nohref="nohref" title="Default" alt="Default">
  </map>
</div>

希望这有帮助！