How to create dot / spot on image in javascript
By Ved Prakash N |
May 26, 2023 |
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.