在javascript中为图像添加标记？

Question

任何人都知道如何在Javascript中为图像（而不是地图）添加标记？

理想情况下，我想要一个处理程序，其行为与向地图添加标记非常相似 - 即onclick会导致标记显示在单击的点上，并返回点击的点的x / y像素坐标

这可能吗？

干杯 理查德

Answer 1

是的，这是可能的。

虽然只使用javascript完全可行，但我会使用某种类似JQuery的库。

方法是在您的标记上添加img元素，然后在要用作“地图”的图像上添加click - 处理程序，moves您的标记在哪里单击该元素。

这是一个未经测试的例子：

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