Add a marker to an image in javascript?

Question

Anyone know how I can add a marker to an image (not a map) in Javascript?

Ideally I'd like a handler that behaves much like adding a marker to a map - i.e. onclick causes a marker to be displayed at the point that was clicked, and returns the x/y pixel coordinates of the point that was clicked.

Is this possible?

Cheers Richard

Answer 1

Yes, it is possible.

Although it's totally doable with just javascript, I would use some kind of library like JQuery.

The approach would be to have an img-element with your marker, and then add a click-handler to the image you want to use as your "map" which moves your marker to where the element was clicked.

Here is an untested example:

<img src="marker.png" id="marker" style="display: none; position: absolute;" />
<img src="map.png" id="map" />

<script type="text/javascript">
$('#map').click(function(e)
{
   $('#marker').css('left', e.pageX).css('top', e.pageY).show();
   // Position of the marker is now e.pageX, e.pageY 
   // ... which corresponds to where the click was.
});
</script>

---

Edit: And this is totally possible without JQuery too, of course. Below is a code-example of just that.

<img src="marker.png" id="marker" style="display: none; position: absolute;" />
<img src="map.png" id="map" />

<script type="text/javascript">
document.getElementById('map').onclick = function(e)
{
   with(document.getElementById('marker'))
   {
        style.left = e.pageX;
        style.top = e.pageY;
        style.display = 'block';
   }
   // Here you forward the coordinates e.pageX, e.pageY 
   // ... to whatever function that needs it
};
</script>