Is it possible to set an event at a specific point in the image?

Question

I have an image like this:

All I'm trying to do is print a message in the console like this:

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

Cm? I want to detect mouse hovering at every point in the image. Does this make it possible?

Answer 1

HTML has tags <map>and <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

So, you can attach an event to any specific area (circle, polygon or rectangle) and manipulate it using javascript. See the example below:

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;
  });

});

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

<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>

Run codeHide result

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>

Hide result

, !