Фон в виде карты и плавное позиционирование

[Сергей О.]

Добрый вечер, уважаемые гуру.
Есть зада, и я прошу Вашей помощи.

Задача вот какая:
1. Есть большое изображение размером 2000 на 1500 px;
2. На нём должны быть размещены другие изображения, т.е. спозиционированны абсолютно.
3. Большое изображение должно плавно менять позицию, так, чтобы размещённые на нём элементы оставались на своих позициях.
(Т.е. случайным образом генерируются координаты и плавно переходит к этим координатам, ждёт там 2-3 секунды и повторяется всё заново)

Я пытаюсь сделать это при помощи iframe. В iframe загружаю страницу, которая содержит это большое изображение, вернее div у которого фон указан, как это большое изображение. Там я позиционирую другие точки.
Сам iframe я сделал размером 500 на 300 и пытаюсь с помощью скроллов управлять позиционированием, но что-то не очень выходи.

Помогите пожалуйста сделать это позиционирование плавны, чтобы фон не повторялся, а позиционирование было только до размеров большого изображения. Точки X, Y для позиций должны выбираться случайным образом.

Спасибо!

[danik.js]

Я пытаюсь сделать это при помощи iframe

Ну зачем же забивать гвозди микроскопом? Есть же молоточек

<style>
.container{
    overflow: scroll;
    width: 100%;
    max-height: 100%;
}
.content{
    width: 10000px;
    height: 1000px;
}
</style>
<div class="container">
    <div class="content"></div>
</div>

[danik.js]

Сергей О., вам нужно копать в сторону css:
position: absolute
overflow: hidden
left, right

Для анимации проще всего использовать jQuery

[Deff]

Я пытаюсь сделать это при помощи iframe. В iframe

Смысл ?
Оберните картинку в два div(а), первый с position:relative; (Этот div будет обрамлением для абсолютно спозиционированных точек на карте.
А всё вместе оберните в <div style="overflow:hidden;width:XXpx;height:YYpx"> этот div будет окном, относительно которого позиционируете второй div
Фрейм уг, там всё будет в пять раз медленнее и прерываться на рендинг главной

[Сергей О.]

Ребят, спасибо за столь оперативные ответы.
Есть плавные переходы, координаты генерируются случайным образом, но всё таки есть ещё вопрос:

Вопрос:
Почему скорость переходы от точки к точке не фиксированная, а то один раз очень быстро, другой раз еле-еле перемещается.

Вот, что у меня получилось:

<script src="jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<script>
function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}

var x = 0;
var y = 0;
var n_top = 0;
var n_left = 0;
function moveMap()
{
x = getRandomInt(0, 1000);
y = getRandomInt(0, 1500);

$('#map').stop().animate({
scrollTop: y,
scrollLeft: x
}, 15000, 'easeOutCubic')
}
setInterval('moveMap()', 4000);
</script>

<div id="map" style="width:500px;height:300px;overflow:hidden;bo rder:1px solid #adadad">
<div style="background:url(photo.jpg);width:1000px;heig ht:1500px;"></div>
</div>

Может можно это сделать как-то без скроллов, по-другому?
И почему скорость меняется?
И вообще, буду рад любым советам, улучшениям.

Спасибо!

[danik.js]

можно это сделать как-то без скроллов

Так ведь уже было сказано:

position: absolute
overflow: hidden
left, right

Оберните картинку в два div(а), первый с position:relative; (Этот div будет обрамлением для абсолютно спозиционированных точек на карте.
А всё вместе оберните в <div style="overflow:hidden;width:XXpx;height:YYpx"> этот div будет окном, относительно которого позиционируете второй div

И почему скорость меняется

Потому что время одно (15000), а расстояние - разное.