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

2022-01-22 00:00:00 hover jquery javascript mouseover jquery-hover

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

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

假设图像被分成 20 个部分，或者我为每个切片选取开始和结束坐标.我如何制作一些 js 代码，以便在同一张图像上有不同区域的不同消息(工具提示)显示..

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

各位有什么帮助吗??

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

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

推荐答案

这是你要找的吗:

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

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

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.

希望这会有用.

相关文章