Настроить значок изображения поверх статического изображения

Question

Чтобы лучше понять мой вопрос, обратитесь к следующему изображению. http://i.imgur.com/yL0nD4h.jpg

У меня есть два изображения. Изображение карты и изображение синего круга. Обратите внимание, что изображение карты - это только изображение, и я не использую API Карт Google для его отображения. Поскольку это всегда будет одно и то же мнение. То, что я пытаюсь выполнить пытается переместить синий круг вдоль черной линии, и я хочу, чтобы иметь возможность перемещать круг динамически с помощью простого дополнительных Int числа

Так что, если мой ИНТ толчок = 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> 

http://jsfiddle.net/rayshinn/9VqQ7/

Любой помощь о том, как я могу начать бы будем очень благодарны! Также большое вам спасибо за то, что вы нашли время, чтобы прочитать это.

Answer 1

Итак, основная идея состоит в том, чтобы иметь функцию f(v), которая возвращает объект с координатой x и y. Затем вы поместите изображение маркера относительно карты и измените атрибуты левого и верхнего стиля, чтобы переместить его.

Вот пример http://jsfiddle.net/9VqQ7/2/