Place a div inside a hotspot area in HTML

Question

In the image - https://ibb.co/2tFTVx4 , I am trying to add a marker animation inside the hot-spot areas - marked inside the pins. Because the options to make the HTML map interactive are very limited, I tried to achieve this by creating an animated marker and setting its position on the image wherever the mouse points. But it doesn't come exactly inside the marked area.

Fiddle - https://jsfiddle.net/woke_mushroom/p6rt1qjz/7/ - (the image won't display and for reference can be accessed from https://ibb.co/2tFTVx4)

The coordinates have been set from https://imagemap.org/

Code-

<body>


  <div class="interactive-map">
    <img src="https://ibb.co/2tFTVx4" usemap="#image_map">
    <div class="location-pin" style="position:absolute"></div>
    <map name="image_map">
      <area alt="one" title="" coords="50,263,70,281" shape="rect" class="noborder icolor00ff00">
      <area alt="two" title="" coords="274,208,295,224" shape="rect">
      <area alt="two" title="" coords="150,362,172,380" shape="rect">
    </map>
  </div>
  <body>

$( document ).ready(function() {
    $('.location-pin').hide();
  });
  
  $('area').click(function(e)
  {
  const marker = document.querySelector('.location-pin');
  $(marker).show();
  marker.style.top = e.pageY+'px';
  marker.style.left = e.pageX+'px';
  });

area{
    cursor: pointer;
    background-color: violet;
    
  }

  
  .location-pin {
    width: 20px;
    height: 20px;
    background: rgb(255, 43, 5);  
    border: 2px solid #FFF;
    border-radius: 50%;
    animation: pulsate 2400ms ease-out infinite;
  }
  
  @keyframes pulsate {
    0% {
    transform: scale(0.1);
    opacity: 0;
    }
    50% {
    opacity: 1;
    }
    100% {
    transform: scale(1.2);
    opacity: 0;
    }
  }

How can I set this marker exactly inside the hot-spot area? Or if there is a better method please suggest.

Thanks!

EDIT : Solution given by nzn and Anand Shukla on add overlay in specific position in HTML map

_“the image won't display”_ - of course it won’t, because you specified a URL that returns an HTML document as image source, instead of an actual image. — CBroe, Sep 10 '20 at 13:49

user13806962 · Answer 1 · 2020-09-10T14:27:36.280

-1

Do you want to use the <area> tag? Here is an example:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

You can see the output in w3schools: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

Or am I getting the question wrong?

Edit: document.create()? and then set the style of newly created element?

Edit2: Or use position relative to set a position of a div and add something when clicked

edited Sep 10 '20 at 14:27

answered Sep 10 '20 at 13:51

user13806962

90
8

No. i don't wish to open any link by clicking the area. I just want to display a div on the area which is clicked. – Itika Bandta Sep 10 '20 at 14:19
@ItikaBandta Do you want to create an element at the location clicked? You can use document.create() You can also use onclick on the area tag (i think?) – user13806962 Sep 10 '20 at 14:26

Place a div inside a hotspot area in HTML

1 Answers1