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

I have this image on html/php page dimensions 500x500 pixels. Now I want that its portions are sliced and when user bring his mouse over the image at different portions of image different message shall be displayed..

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

Lets say that image is sliced in 20 parts or I pick up starting and ending coordinates for each slice.. How can I make some sore of js code so that on same image there are different areas where different messages (tooltip) are displayed..

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

Guys any help??

伙计们有什么帮助？

I thought of programming using map, area and coordinates methods.. But no luck finishing it..

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

2 个解决方案

#1

Hi Is this What You looking For :

嗨这是你在找什么：

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

The Jquery Version:

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>

this code will get the mouse co-ordinate relative to image after hovering the image and then will check if co-ordinates are of certain area are hovered ? and will give you the alert message if they are hovered.

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

Hope this'll be useful.

希望这会有用。

#2

There are several ways:

有几种方法：

Use map and area tags see its description it was maked for that thing

使用地图和区域标签可以看到它的描述是为了那个东西
Use svg

使用svg

But i think first solution is best for you

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

#1