鼠标悬停消息显示在图像jQuery / js的某些部分 [英] mouse hover message display over certain parts of image jquery/js
问题描述
我在html / php页面上有这个图像，尺寸为500x500像素。现在，我希望它的部分被切片，并且当用户将他的鼠标放在图像的不同部分时，图像的不同部分将显示出来。
可以说图像被切片在20部分或我拿起每个切片的起始和结束坐标..我怎样才能让一些JS代码疼痛，以便在同一图像上有不同的区域，其中显示不同的消息（工具提示）。
伙计任何帮助??
我想到使用地图，面积和坐标方法编程..但没有运气完成它..
你在寻找什么：
< HTML>
< head>
< script language =JavaScript>
函数getDetails（obj）{
clickX = window.event.x-obj.offsetLeft;
clickY = window.event.y-obj.offsetTop; （（clickX> = 100&& clickX< = 200）&&（clickY> = 100&&clickY< = 200））
）
{
alert在图像的（100,100）和（200,200）之间）;
}
}
< / script>
< / head>
< body>
< img src =image.jpgonMousemove =getDetails（this）id =myimgheight =500width =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&& amp; ;点击X< = 200）&&&（clickY> = 100&& clickY< = 200））
{
alert（You are between（100,100）and（200,200） ）;
}
}）;
}）;
< / script>
< / head>
< body>
< img src =image.jpgid =myimgheight =500width =500/>
< / body>
这个代码会在鼠标悬停图像后获得鼠标相对于图像的坐标，然后检查是否坐标是否在某个区域悬空？如果它们被徘徊，它们会给你提示信息。
希望这会有用。
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..
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..
Guys any help??
I thought of programming using map, area and coordinates methods.. But no luck finishing it..
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:
<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.
这篇关于鼠标悬停消息显示在图像jQuery / js的某些部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
