每个像素的工具提示答案

【问题标题】：Tooltip per pixel每个像素的工具提示
【发布时间】：2015-11-15 03:50:52
【问题描述】：

我希望这样，当您将鼠标悬停在 img 中的一个像素上时，您会看到一个工具提示，显示您在哪个像素 (X,Y) 上。我怎样才能做到这一点？我需要能够捕捉到两件事：

他们正在盘旋
鼠标的当前坐标，相对于图像的像素

请注意，我希望这是 _original) img 的 (x,y)，即使他们的浏览器正在缩放它

【问题讨论】：

【解决方案1】：

这段代码sn-p可能对你有帮助，把这段代码复制到新的html文件中测试一下

window.onmousemove = function() {
  var toolitp = document.getElementById("tooltip");
  toolitp.style.top = window.event.clientY + "px";
  toolitp.style.left = window.event.clientX + "px";
  toolitp.innerHTML = " X: " + window.event.clientX + " Y: " + window.event.clientY;
}

&lt;div style="width: 100px; height: 15px; top:0; left: 0; position: absolute; border: 1px solid black;" id="tooltip"&gt;&lt;/div&gt;

【讨论】：

toolitp.style.top = window.event.clientY + "px";否则它不会工作
谢谢 - 但这是相对于整个窗口的；我希望它相对于 img（就 img 的像素而言，与浏览器缩放或页面或窗口中的 img 位置无关）