鼠标悬停消息显示在图像 jquery/js 的某些部分

Posted 2023-05-08

技术标签:

【中文标题】鼠标悬停消息显示在图像 jquery/js 的某些部分【英文标题】：mouse hover message display over certain parts of image jquery/js 【发布时间】：2013-03-04 22:42:02 【问题描述】：

我在 html/php 页面尺寸为 500x500 像素上有这张图片。现在我希望它的部分被切片，当用户将鼠标悬停在图像不同部分的图像上时，应显示不同的消息..

假设图像被分成 20 个部分，或者我为每个切片选取起始和结束坐标。我怎样才能使一些 js 代码疼痛，以便在同一个图像上有不同的区域，其中有不同的消息（工具提示）显示..

各位有什么帮助吗？？

我曾想过使用地图、区域和坐标方法进行编程..但没有运气完成它..

【问题讨论】：

【参考方案1】：

嗨，这是你要找的东西吗：

<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"   />
</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"   />
</body>

此代码将在悬停图像后获取鼠标相对于图像的坐标，然后检查是否悬停了某个区域的坐标？如果它们被悬停，则会向您发送警报消息。

希望这会有用。

【讨论】：

你得到了我的赞许......虽然我会使用地图区域方法......在这种情况下，如果你能帮助我......你非常受欢迎...... :) 一定会帮助你的。我一了解它就通知你。 :)【参考方案2】：

有几种方法：

使用map 和area 标签查看它的描述它是为那个东西制作的

使用 svg

但我认为第一个解决方案最适合您

【讨论】：

对于地图和区域，我们是否必须使用任何 jquery 来显示该部分的消息或链接？你可以使用javascript或者这个解决方案frankmanno.com/ideas/css-imagemap（用电脑滚动到图片）

以上是关于鼠标悬停消息显示在图像 jquery/js 的某些部分的主要内容，如果未能解决你的问题，请参考以下文章

在 img 鼠标悬停时显示 div (jquery)