获取鼠标点击图片时候的坐标，以及利用html 中的useMap 和area 实现图片固定位置的点击事件
要获取鼠标点击图片时的坐标，可以为图片添加click事件监听器，在事件处理函数中使用event对象的offsetX和offsetY属性来获取点击位置相对于图片的坐标。
以下是实现这一功能的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Click Coordinates</title>
</head>
<body>
<img id="myImage" src="path_to_your_image.jpg" alt="My Image" style="width:200px;">
<script>
// 获取图片元素
var img = document.getElementById('myImage');
// 为图片添加点击事件监听器
img.addEventListener('click', function(event) {
// 获取鼠标点击的坐标
var x = event.offsetX;
var y = event.offsetY;
alert('Clicked at: X=' + x + ', Y=' + y);
});
</script>
</body>
</html>关于useMap和area实现图片固定位置的功能，这通常用于将图片的一部分关联到网页上的不同链接。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Map</title>
</head>
<body>
<img src="path_to_your_image.jpg" alt="My Image" usemap="#myMap">
<map name="myMap">
<area shape="rect" coords="100,100,200,200" href="https://www.example.com" target="_blank">
<!-- 其他 area 元素可以放在这里定义其他固定位置的链接 -->
</map>
</body>
</html>在这个例子中，usemap属性指定了map元素的name，area元素的shape属性定义了形状（例如矩形rect），coords属性定义了形状的坐标，最后href属性定义了点击该区域时要导航到的链接。
评论已关闭