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