Глава 5

Глава 5. АВТОМАТИЗАЦИЯ ВЗАИМОДЕЙСТВИЯ ПОЛЬЗОВАТЕЛЯ С WEB-СТРАНИЦАМИ

Технология перемещения объекта по экрану

При попадании курсора мыши на объект можно определить координаты этого курсора, связать с объектом, а затем, перемещая курсор (тащить по экрану объект). В таком процессе участвуют два события. Первое событие – mousedown (нажатие кнопки мыши), второе - mousemove (перемещение мыши). Эти события мыши в программе обрабатываются с помощью методов OnMouseDown и OnMouseMove, которые, в свою очередь, получают сведения о координатах курсора мыши на экране из объекта Event, который принадлежит общему объекту Window. Если запустить ПРИМЕР14, то будет понятна задача. Внешний вид Web-страницы представлен на рис. 31.

Рис. 31. Web-страница с объектом в виде рисунка, который можно перемещать по экрану

Программные коды на HTML и программа сценария для перемещения объекта представлены на листинге 16.

Листинг 16.

<HTML>

<HEAD>

<TITLE>Перемещение объекта</TITLE>

img {position: absolute;}

#dr {font-family:Arial; Size:12pt; Color:Navy}

#za {font-size:12pt}

</STYLE>

Dim sf

Dim sf_left

Dim sf_top

Dim im

Sub window_onload

sf_left=sf.offsetLeft

sf_top=sf.offsetTop

End Sub

Sub document_onmousedown()

Set im = window.event.srcElement

End Sub

Sub document_onmousemove()

Dim ob_left, ob_top

if (window.event.button = 1) then

ob_left = window.event.x

ob_top = window.event.y

im.style.pixelLeft = ob_left - (im.offsetWidth/2)

im.style.pixelTop = ob_top - (im.offsetHeight/2)

window.event.returnValue = false

End if

End Sub

</SCRIPT>

</HEAD>

<BODY>

Возьмите мышкой объект и переместите его<BR>

</P>

</BODY>

</HTML>

В приведенной программе выше, созданы три процедуры, в которых переменными являются sf – описание объекта в виде рисунка, sf_left – координата объекта относительно левой стороны экрана, sf_top – координата объекта относительно верха экрана, ob_left, ob_top и im – описание объекта, соединенного с указателем курсора. Первая процедура (Sub window_onload) осуществляет при загрузке рисунка вычисление его координат на экране компьютера. Вторая процедура (Sub document_onmousedown()) освобождает указатель курсора и объект рисунок. Третья процедура (Sub document_onmousemove()) проверяет - нажата ли левая кнопка мыши, если она удерживается, то проверяется положение объекта на экране, затем для объекта рисунок определяется ее центр. Для этого из координаты рисунка вычитают половину его горизонтального (вертикального) размера. Для плавного перемещения курсора методу returnValue присваивается значение false. Корпорация Microsoft ввела объект event – событие, который относится к тому объекту на экране, который описывается, проводимым над ним событием. В разработанной программе для объекта рисунок используется объект event и те свойства, которые ему доступны.