將標記添加到JavaScript中的圖像？

Question

任何人都知道我可以在JavaScript中添加一個標記到圖像（而不是地圖）？

理想情況下，我想要一個處理程序，其行爲非常像向地圖中添加標記 - 即onclick導致標記顯示在點擊的位置，並返回點的x/y像素座標點擊。

這可能嗎？

乾杯 理查德

Answer 1

是的，這是可能的。

儘管只用javascript就完全可行，但我會使用某種庫，如JQuery。

該方法是使用您的標記具有img元素，然後將click-處理程序添加到要用作「地圖」的圖像中，該元素被點擊到哪裏。

下面是一個未經測試的例子：

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

---

編輯： 這是完全可能沒有太多的JQuery，當然。 下面是一個代碼示例。

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