Aggiungi un marker a un'immagine in javascript?

Question

Qualcuno sa come posso aggiungere un marcatore a un'immagine (non una mappa) in Javascript?

Idealmente mi piacerebbe un gestore che si comporta come l'aggiunta di un indicatore a una mappa - cioè onclick provoca un marcatore per visualizzare al punto che è stato cliccato, e restituisce le coordinate x/y in pixel del punto che era cliccato.

È possibile?

Acclamazioni Richard

Answer 1

Sì, è possibile.

Anche se è completamente fattibile con solo javascript, userei qualche tipo di libreria come JQuery.

L'approccio sarebbe avere un elemento img con il proprio indicatore e quindi aggiungere un gestore click all'immagine che si desidera utilizzare come "mappa" che è moves l'indicatore su cui è stato fatto clic sull'elemento.

Ecco un esempio non testato:

<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: E questo è del tutto possibile senza JQuery troppo, naturalmente. Di seguito è riportato un esempio di codice proprio di questo.

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