Dodaj znacznik do obrazu w javascript?

Question

Ktoś wie, w jaki sposób mogę dodać znacznik do obrazu (nie mapy) w JavaScript?

Idealnie chciałbym obsługi, która zachowuje się podobnie jak dodanie znacznika do mapy - tj. Onclick powoduje, że znacznik jest wyświetlany w miejscu, które zostało kliknięte, i zwraca współrzędne x/y pikseli punktu, który był kliknięte.

Czy to możliwe?

Cheers Richard

Answer 1

Tak, jest to możliwe.

Mimo że jest to całkowicie wykonalne przy użyciu javascript, użyłbym jakiejś biblioteki, takiej jak JQuery.

Podejście polegałoby na umieszczeniu elementu img z markerem, a następnie dodaniu do obrazu, którego chcesz użyć jako "mapy", który chcesz użyć jako swojej "mapy", do miejsca kliknięcia elementu, do której chcesz użyć elementu click.

Oto niesprawdzone przykład:

<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: I jest to całkowicie możliwe bez JQuery też, oczywiście. Poniżej znajduje się przykładowy kod.

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