How can I position the element at very precise pixel on image using Top and Left CSS property-CodePudding

I want to display a dot at specific pixel on image click. I'm displaying it by giving top and left values in %. What happening is the dot isn't moving when clicked another pixel present inside the dot. When click outside then it is moving. I don't understand why this is happening.

May be it is because there is very small change in top and left values for each pixel.

I've updated CSS for displaying dot within the circle

.hObiiS{
  border: solid 1px #303030 !important; 
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  box-sizing: border-box;
  box-shadow: none !important; 
  height: 9px !important; 
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  width: 9px !important; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hObiiS::before{
    position: absolute;
    content: '';
    width: 1px;
    height: 1px; 
    background-color: rgb(224, 1, 1);
    border-radius: 50%;
}

<div  style="top: 25.4601%; left: 58.6382%;"></div>

Can someone please provide solution to move dot per pixel ?

CodePudding user response：

You need to stop the dot from stopping the click going through to the image.

You can use pointer-events for that.

Here's a simple example:

.container {
  position relative;
  display: inline-block;
  width: 30vmin;
  height: 30vmin;
}

img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dot {
  background: red;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: absolute;
  top: 10%;
  left: 10%;
  pointer-events: none;
}

<div ><img onclick="alert('I saw the click');" src="https://picsum.photos/id/1015/300/300">
  <div ></div>
</div>

CodePudding user response：

Here is your problem solution.

let container  = document.querySelector('img');
let dot = document.getElementById('dot');

document. addEventListener('click', function( e ) {
if (container === event.target && container.contains(e. target)) {
  
  var parentPosition = getPosition(container);
    var xPosition = e.clientX - parentPosition.x - (dot.clientWidth / 2);
    var yPosition = e.clientY - parentPosition.y - (dot.clientHeight / 2);
     
    dot.style.left = xPosition   "px";
    dot.style.top = yPosition   "px";
}
});






// Helper function to get an element's exact position
function getPosition(el) {
  var xPos = 0;
  var yPos = 0;
 
  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;
 
      xPos  = (el.offsetLeft - xScroll   el.clientLeft);
      yPos  = (el.offsetTop - yScroll   el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos  = (el.offsetLeft - el.scrollLeft   el.clientLeft);
      yPos  = (el.offsetTop - el.scrollTop   el.clientTop);
    }
 
    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}

.container {
  position: relative;
  cursor: "crosshair";
}
#dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  display: inline-block;
  background-color: red;
  transform: translate(100, 0);
}

<!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>Document</title>
</head>
<body>
  <div >
    <img width="200px" alt="" src="https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/upwk62143495-wikimedia-image.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=218f80fbd029cd0fa69b8597ef4928c0" />
    <span id="dot" />
  </div>
</body>
</html>

Codepen

Your mouse click position (e.clientX and e.clientY) is relative to your browser's top-left corner that's why your click position is not accurate. You can study the details explanation in this article. Move Element to Click Position