我在 html/php 页面尺寸为 500x500 像素上有这张图片。现在我希望它的部分被切片,当用户将鼠标放在图像不同部分的图像上时,应显示不同的消息..
假设图像被分成 20 个部分,或者我为每个切片选取起始和结束坐标。我怎样才能使一些 js 代码疼痛,以便在同一张图像上有不同的区域显示不同的消息(工具提示)。
各位大侠帮忙??
我想过使用地图、区域和坐标方法进行编程。但是没有运气完成它。
我在 html/php 页面尺寸为 500x500 像素上有这张图片。现在我希望它的部分被切片,当用户将鼠标放在图像不同部分的图像上时,应显示不同的消息..
假设图像被分成 20 个部分,或者我为每个切片选取起始和结束坐标。我怎样才能使一些 js 代码疼痛,以便在同一张图像上有不同的区域显示不同的消息(工具提示)。
各位大侠帮忙??
我想过使用地图、区域和坐标方法进行编程。但是没有运气完成它。
嗨,这是您要找的东西:
<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.
Hope this'll be useful.
有几种方法:
使用map
和area
标签查看它的描述它是为那个东西制作的
使用 svg
但我认为第一个解决方案最适合你