html鼠标悬停显示坐标,js如何在image标签上获取鼠标停留坐标位置

你可以在鼠标移动事件上监听鼠标坐标，并将其显示在页面上。如果你想在一个图片标签上获取鼠标停留的位置，你需要将鼠标移动事件监听器添加到该图片标签上。

下面是一个简单的例子：

HTML

<img id="myImage" src="path/to/image.jpg" width="500" height="500" />
<div id="coords"></div>

JavaScript

const image = document.getElementById('myImage');
const coords = document.getElementById('coords');

image.addEventListener('mousemove', e => {
  const x = e.offsetX;
  const y = e.offsetY;
  
  coords.innerText = `(${x}, ${y})`;
});

在上面的代码中，我们首先获取了图像标签和文本坐标的元素。然后，我们使用`addEventListener`方法添加了一个`mousemove`事件监听器，该监听器在鼠标在图像上移动时触发。在监听器中，我们使用`offsetX`和`offsetY`属性获取鼠标在图像中的位置，并将其显示在文本坐标元素中。

相关问题

html鼠标悬停显示坐标,js如何在image标签上获取鼠标停留坐标位置页面案例

可以使用以下代码实现：

HTML：

<img src="example.jpg" onmousemove="showCoords(event)">
<div id="coords"></div>

JavaScript：

function showCoords(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coords = "X: " + x + ", Y: " + y;
  document.getElementById("coords").innerHTML = coords;
}

解释：

1. 在`<img>`标签中添加`onmousemove`事件，并将其绑定到`showCoords(event)`函数。

2. `showCoords(event)`函数获取鼠标停留位置的横纵坐标。

3. 将坐标信息显示在页面上，可以通过`document.getElementById("coords")`获取`<div>`标签，并通过`innerHTML`属性更新其内容。