51929

mouse hover message display over certain parts of image jquery/js

Question:

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

Answer1:

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.

Answer2:

There are several ways:

<ol><li>

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

</li> <li>

Use svg

</li> </ol>

But i think first solution is best for you

Recommend

  • .NET REGEX Matching matches empty strings
  • Chrome executing all JS again on browser back button
  • evaluating a groovy string expression at runtime
  • PHP Delete Multiple Rows With Check Box
  • Android GPS Location Update Method does not work in OnCreate of Map activity
  • Angular Custom Order Pipe sorting array correctly
  • is it possible to turn off wifi or switch iPhone to offline mode in codes in swift 4?
  • Save iText created PDF to internal memory as MODE_WORLD_READABLE
  • Using pdfclown few search keywords are not highlighting in chinese/japanese documents
  • Disappearing icons in WPF
  • hover link to change *PAGE* background color with css
  • Change ActionBar color in a Fragment
  • Search for text in a string, copy & paste rows to new sheet
  • Simulating argparse command line arguments input while debugging
  • Optimization of Neural Network input data
  • how java graphics repaint method actually works
  • Encounter error “IB API required” when IB API is installed
  • SQL function not working when trying to write table to non-default schema
  • Insert inline image into Lotus Notes message
  • How do I set context and followup event in one intent?
  • Tableview make specific cell or row editable
  • C# XML Serialization/DeSerialization [closed]
  • ClearCase can I use clearexport_ccase/clearimport to copy VOB data to a VOB on a different machine
  • Launch Dash from Jupyter Notebook
  • Can someone explain how Yii minimizing assets is supposed to work on Heroku?
  • How to get WinForms custom control's default value to be respected when first dropped on a form
  • jQuery YQL SELECT FROM rss variable
  • Protractor Page objects - TypeError: Object # has no method 'methodName'
  • Issue with Terrain Collision using Three.js
  • How to output data of primefaces DataGrid component by columns instead of by rows (transpose data)?
  • git clone, upload-pack out of memory
  • Javascript inside HTML import not affecting imported HTML
  • Floating parent div grows to hypothetical width of floating child div
  • Terminal run dalvikvm with am.jar
  • Stacked bar chart with continuous time-axis as x-axis
  • How to handle div that is created dynamically in a table
  • Make checkout phone field optional for specific countries in WooCommerce
  • Sql - ON DUPLICATE KEY UPDATE
  • Creating random wired topology for given arbitrary number of nodes on NS2
  • ReferenceError: TextEncoder is not defined