При создании страниц с фотографиями и картинками, длина которых превышает разрешение экрана дизайнерам приходится значительно уменьшать размер изображения. Если при этом изображение представляет собой панораму (размер изображения по вертикали в 5-10 раз меньше чем его ширина), уменьшение картинки приведет к тому, что пользователь вообще не разберется, что на ней изображено. Для решения данной проблемы можно использовать удобную прокрутку картинки в небольшой области. При этом картинку целикому увидеть не удастся, зато можно будет просмотреть ее фрагменты во весь размер.

При создании прокрутки картинки используется свойства ScrollLeft и ScrollTop (горизонтальное и вертикальное прокручивание соответственно).

Приведем небольшой пример использования одного из свойств:

<script type="text/javascript">
var Timer;

function ScrollLeft()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft -= 2", 15);
}
function ScrollRight()
{
Timer = setInterval("document.getElementById('PANORAMA').scrollLeft += 2", 15);
}
</script>

<div id="PANORAMA" style="width:350px; height:150px; border: 1px solid;
overflow:hidden">
<img src="Campus.jpg" style="width:1000px"/>
</div>

<div style="width:350px; text-align:center">
<input type="button" value="<" title="Scroll left" style="width:25px"
onmousedown="ScrollLeft()"
onmouseup="clearInterval(Timer)">
<input type="button" value=">" title="Scroll right" style="width:25px"
onmousedown="ScrollRight()"
onmouseup="clearInterval(Timer)">
</div>

Пусть у нас есть небольшое изображение Campus.jpg шириной 1000 пикселей. При нажатии на кнопку Scroll left выполняется функция ScrollLeft, которая уменьшает значение свойства ScrollLeft на 2, то есть смещает указанное изображение влево, аналогично смещение вправо происходит при вызове функции ScrollRight.

Обратите внимание что для компоненты div, в котором размещено изображение установлено свойство overflow:hidden, которое запрещает ему менять размер на указанное в описании.