Javascript-форум - Помогите сделать скрол изображения

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Помогите сделать скрол изображения (https://javascript.ru/forum/dom-window/7383-pomogite-sdelat-skrol-izobrazheniya.html)

Помогите сделать скрол изображения

Доброго времени суток! Прошу помощи с весьма непростым для меня вопросом.

Итак, есть <div></div> листинг ниже.

<div id="hall" class="hall_cont" style="margin: auto; background: transparent url(saal_img.jpg) no-repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 1242px; height: 952px; position: relative; top: 0px; left: 0px;"></div>

В итоге на странице отображается "часть" рисунка. Вот так.

Исходный рисунок, который идет на бекграунд в DIV вот.

Задача: как сделать и что использовать, чтобы происходил скрол бэкграунда в DIV при вождении указателя мышки по диву? То есть если мы будем вести мышку в диве направо - бэкраунд плавно "съезжает" тоже вправо. И как реагировать на скорость "ведения" курсора, чтобы скрол бэкраунда мог также менять свою скорость?

Задача нелегкая, но я думаю вы мне подскажете. Прошу вас помочь примерами.
Всем спасибо за проявленный интерес.

Диву присвой свойство overflow:hidden;
картику вложи в див, с position:absolute; и по событию onmousemove установленном на диве изменяй свойства left и top картинки

Цитата:

Сообщение от PepeL

и по событию onmousemove установленном на диве изменяй свойства left и top картинки

зачем если можно изменять background-position ?
А скорость регулирется расстоянием от центра Div.

Цитата:

зачем если можно изменять background-position ?

можно и так )

То есть можно начать так?

<style type="text/css">
.hall_container{
  border: 2px #da251d dotted;
  overflow: hidden;
  width: 550px;
  height: 550px;
  position: relative;
  top: 0;
  left: 0;
  margin: auto;
  background: transparent url(hall.jpg) no-repeat scroll 0% 0%;}
</style>
<script language="javascript" type="text/javascript">
<!--
function scrollHall()
{

}
//-->
</script>
</head>

<body>

<div id="hall_container" class="hall_container" onmousemove="scrollHall()">/div>

</body>

только

<div id="hall_container" class="hall_container" onmousemove="scrollHall(this)"></div>

что бы в функцию попадал элемент который надо сместить (что бы не выбирать его повторно)
осталось написать функцию.

Вопрос, как узнать координаты мыши относительно div id="hall_container" ?

Цитата:

Сообщение от Ivanishin (Сообщение 43027)

Вопрос, как узнать координаты мыши относительно div id="hall_container" ?

Вот формула: http://javascript.ru/blog/Andrej-Par...ta-na-stranice

+ вот тут показано как узнать координату мыши.

А дальше вычитаем из одного другое и получаем смещение по х и у относительно div id="hall_container"

ps: вчера не доглядел и написал пол решения, сегодня дописал :)

Gozar, спасибо очень помогло=)

Тут еще вопрос нарисовался к знатокам. Вот например кусок кода.

var tmp = document.getElementById('hall_container');
      tmp.style.top = ( tmp.style.top.replace ( 'px', '' ) - 1 ) + 'px';

Нормально попиксельно сдвигает див.

А вот этот

var tmp = document.getElementById('hall_container');
      tmp.style.top = ( tmp.style.top.replace ( 'px', '' ) + 1 ) + 'px';

Заставляет див сместиться на такое количество пикселей, что он сразу улетает очень далеко. Что не правильно, ведь разница в кодах только в знаке?

tmp.style.top = ( parseInt(tmp.style.top) + 1 ) + 'px';