mouse hover message display over certain parts of

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

标签： javascript jquery hover mouseover jquery-hover

2条回答

欢心

2楼-- · 2019-06-24 06:19

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.

0人赞添加讨论(0) 举报

别忘想泡老子

3楼-- · 2019-06-24 06:20

There are several ways:

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

But i think first solution is best for you

0人赞添加讨论(0) 举报

mouse hover message display over certain parts of

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间