我在 html/php 页面上有这张图片，尺寸为 500x500 像素。现在我希望它的部分被切片，当用户将鼠标移到图像的不同部分时，将显示不同的消息。
假设图像被切成 20 个部分，或者我为每个切片选择开始和结束坐标。我如何制作一些 js 代码，以便在同一图像上有不同的区域，其中有不同的消息(工具提示)显示..
伙计们有什么帮助吗？？
我想到了使用 map 、面积和坐标方法进行编程..但是没有运气完成..
最佳答案
您好，这是您要找的吗:
<html>
<head>
<script language="JavaScript">
function getDetails(obj){
clickX = window.event.x-obj.offsetLeft;
clickY = window.event.y-obj.offsetTop;
if((clickX>=100&&clickX<=200)&&(clickY>=100&&clickY<=200))
{
alert(" You are between (100,100) And (200,200) of the Image");
}
}
</script>
</head>
<body>
<img src="image.jpg" onMousemove="getDetails(this)" id="myimg" height="500" width="500" />
</body>
</html>
Jquery 版本:
<head>
<script language="JavaScript">
$(document).ready(function(){
$("#myimg").bind("mousemove",function(e){
var offset = $("#myimg").offset();
var clickX=e.clientX - offset.left;
var clickY=e.clientY - offset.top;
if((clickX>=100&&clickX<=200)&&(clickY>=100&&clickY<=200))
{
alert(" You are between (100,100) And (200,200) of the Image");
}
});
});
</script>
</head>
<body>
<img src="image.jpg" id="myimg" height="500" width="500" />
</body>
此代码将在悬停图像后获取相对于图像的鼠标坐标，然后检查坐标是否悬停在特定区域？如果它们悬停，会给你警告消息。
希望这会有用。
关于javascript - 鼠标悬停消息显示在图像的某些部分 jquery/js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15445591/