How to create dot / spot on image in javascript

By Ved Prakash N | May 26, 2023 | Javascript
Share : Whatsapp

https://www.fundaofwebit.com/post/how-to-create-dot-spot-on-image-in-javascript

How to create a hotspot / dot on image in javascript


Hi guys, in this post, you will be learning how to create a SPOT or a DOT on Image in javascript.

Below is 1 example shown in an image as follows:



Create a index.html file and paste the below code as follows:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>How to create dot / spot on image in javascript</title>
</head>
<body>
 
  <img
    id="hotspot_list"
    name="hotspot_image"
    style="width: 50%"
    src="your/path/to/car.png"
    alt="Hotspot image"
    onclick="clickHotspotImage(event);
  "/>


  <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
  <script type="text/javascript">

  function clickHotspotImage(event) {

      var xCoordinate = event.offsetX;
      var yCoordinate = event.offsetY;
     
      alert('X'+ xCoordinate + 'Y' + yCoordinate);

      var hotspotlist = document.getElementById('hotspot_list').value;
      document.getElementById('hotspot_list').value = document.getElementById('hotspot_list').value + '\n' + xCoordinate + ',' + yCoordinate;

      const size = 20; //dot/spot sizing
      $('#hotspot_list').parent().append(`<div style="width: ${size}px; height: ${size}px; background: black; position: absolute; top: ${yCoordinate}px; left: ${xCoordinate}px; border-radius: ${size}px"/>`);

  }
  </script>
 
</body>
</html>


Hope it helps you guys.