Question

An <input> with type="image" and name="something" will send the variables something_x and something_y to the server, along with the coordinates where the image was clicked.

If the form is being handled by JavaScript, for instance in an AJAX setup, how do I go about getting the coordinates where the element was clicked?

So far my only idea is to set:

imginput.onclick = function(e) {
    e = e || window.event;
    var coords = getMouseCoords(e), elempos = getElementCoords(this); // defined elsewhere
    this.value = (coords.x - elempos.x)+","+(coords.y - elempos.y);
}

The problem is, I’d have to make sure the onclick event is assigned to the correct input elements, even if they are loaded or otherwise created after the document has loaded (a problem I’ve already had to face when dealing with custome tooltips). Is there maybe a better solution?

Answer 1

Resolved in the same way as custom tooltips: an “updateLiveContent” function that re-runs the tooltip initialisation and the input images.