Adicionar um marcador para uma imagem em javascript?

Question

Alguém sabe como posso adicionar um marcador para uma imagem (não um mapa) em JavaScript?

Idealmente, eu gostaria de um manipulador que se comporta muito como a adição de um marcador a um mapa - ou seja onclick provoca um marcador para ser apresentado no ponto que foi clicado, e retorna o X / Y coordenadas de pixel do ponto que foi clicado .

Isso é possível?

Felicidades Richard

Answer 1

Sim, é possível.

Embora seja totalmente factível com apenas javascript, gostaria de usar algum tipo de biblioteca como JQuery .

A abordagem seria ter um img-elemento com o seu marcador, e depois adicionar um clique em -handler para a imagem que deseja usar como seu "mapa" que movimentos seu marcador para onde o elemento foi clicado.

Aqui está um exemplo não testado:

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

---

Editar: E isso é totalmente possível sem JQuery também, é claro. Abaixo está um código de exemplo de exatamente isso.

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