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

时间:2013-03-16 04:31:05

标签: javascript jquery hover mouseover jquery-hover

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

让我们说图像被分成20个部分,或者我为每个切片拾取起始坐标和结束坐标。我怎样才能使js代码感到疼痛,以便在同一图像上有不同的区域,其中不同的消息(工具提示)是显示..

伙计们有什么帮助?

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

2 个答案:

答案 0 :(得分:3)

嗨,这是你在找什么:

<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>

此代码将在悬停图像后获得相对于图像的鼠标坐标,然后检查某些区域的坐标是否悬停?如果它们被徘徊,它会给你提醒。

希望这会有用。

答案 1 :(得分:1)

有几种方法:

  1. 使用maparea代码查看该内容的说明

  2. 使用svg

  3. 但我认为第一种解决方案最适合你