Javascript 在静态图像上打印图像图标

为了更好地理解我的问题，请参考下图。

我有两张照片。地图图像和蓝色圆圈图像。请注意，地图图像只是一个图像，我没有使用谷歌地图API来显示它。因为它将永远是相同的观点。我试图实现的是沿着黑线移动蓝色圆圈，我希望它能够通过简单的递增整数动态移动圆圈

所以如果我的int push=5

地图上的圆圈将向上移动一定距离，int push=-5将使其返回

目前，我有一个简单的html背景和地图图像，并将蓝色圆圈放置在顶部，带有图像标记，如下所示

<div style="background-image:url('http://i.imgur.com/ZZHnuaf.png'); width:517px;height:374px;">
    <img width="30px" height="30px"src="http://i.imgur.com/MUlVIyg.png" />
</div>

---

任何关于我如何开始的帮助都将不胜感激！也非常感谢您花时间阅读这篇文章。

因此，主要思想是使用函数

f（v）

返回具有x和y坐标的对象。然后将标记图像相对定位在地图内部，并更改“左”和“顶”样式属性以使其四处移动

---

下面是一个例子

你好，雨果，很抱歉，我花了这么长时间才跟进。但是你能解释一下你的代码中这部分的用途吗？对于（var i=0；i<25；i++）{map.decrement（）；}，我主要是为了演示而把它放在那里的。递减和递增沿直线上下移动标记。嘿，雨果，另一个快速问题。这两行marker=document.getElementById（“marker”）；此设置位置（初始值X，初始值Y）；似乎在IE7上引发了一个问题有什么想法吗？@BaconJuice我不能直接说什么不起作用。可能是变量INITIAL_X、INITIAL_Y和marker没有正确解析。我在这里发布了一篇文章，提供了更多细节。你能看一下吗？