Geek Answers Handbook

Displaying a mouse message on specific parts of a jquery / js image

I have this image on html / php pages of size 500x500 pixels. Now I want its parts to be sliced, and when the user hovers over the image on different parts of the image, another message should be displayed.

Suppose that the image is cut into 20 parts, or I take the start and end coordinates for each fragment. How can I make some sores of the js code, so that on the same image there are different areas where different messages (tooltip) is displayed ..

Will the guys help?

I was thinking of programming using map, area, and coordinate methods. But I could not finish it.

+4
source share
2 answers

Hi, this is what you are 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>

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 coordinate relative to the image after the image freezes, and then check if the coordinates of a certain area are located. and gives a warning message if they freeze.

Hope this will be helpful.

+3
source

There are several ways:

  • Use the map and area tags to see its description, which was made for this thing.

  • Use svg

But I think the first solution is better for you.

+1
source

More articles: