Start networking and exchanging professional insights

Register now or log in to join your professional community.

Follow

How can I add a text box in run time in a position of mouse click on an image map like tagging an image in Facebook?

not a Pr-defined location

user-image
Question added by Mahmoud Manaa , Network Engineer , Zain - Kuwait
Date Posted: 2013/09/06
Houssem Gharsallah
by Houssem Gharsallah , Software Architect , NOMD Technologies

_ Use javascript onclick event to fire the click event. 

_ Use ajax to call the server side method and pass the x and y mouse coordinates as parameters

_ below an example of getting x and y coordinates of mouse

function readMouseMove(e){ x = e.clientX; y = e.clientY; }

document.onmousemove = readMouseMove; 

Daanish Rumani
by Daanish Rumani , Product Manager , Publicis Sapient

Steps:

  1. Add a a click event on either the image or on a transparent layer above it.
  2. Add a text box that is hidden by default.
  3. In the click event un-hide the text box and set its X and Y (i.e. top and left) co-ordinates based on the current mouse location. You can query the current mouse location.

Note: You may have to use some JavaScript.

More Questions Like This

Do you need help in adding the right keywords to your CV? Let our CV writing experts help you.