mouse hover message display over certain parts of image 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..
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..
Answer
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.