Сложные сценарии обработки JS

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

Для начала необходимо подготовить фотографии для просмотра, переименовав их согласно порядковым номерам. Это важно, так как для реализации задачи мы будем использовать функцию с передачей параметра, а параметром станет именно номер в имени фотографии. Далее нужно определиться с тем, где будут размещены фотографии. В приведенном листинге предполагается, что фотографии размещены в одном каталоге с файлом веб-страницы. Если у вас не так, то в теле функции придется указать путь к каталогу с фотографиями.

Рассмотрим листинг более подробно.

<html> - начало веб-страницы.
<head> <script> - начало заголовка страницы и сценария.
function foto(num) {- определение и начало функции foto, получающей в качестве параметра значение переменной num.
myFoto . src=num+" . jpg"} - присвоение свойству src элемента myFoto строковой константы, состоящей из значения переменной num (номере имени фотографии, выполняли при подготовке) и ее расширения . jpg. Если ваши фото и веб-страница находятся в разных каталогах, то перед переменной num укажите адрес, например myFoto. src="/ foto/" +num+". jpg.
</script></head> - завершение сценария и заголовка.
<body> - начало тела веб-страницы.
<div style="position:absolute; top:130; left:5; border-style : outset; width: 100; height: 60; "> - начало раздела, определяющего стиль для вывода надписей: начинать с высоты 130, левый край 5 пунктов, рамка шириной 100 и высотой 60 пунктов.
<div sty1е="cursor : hand;" onMouseOver="this . style.color='blue'; foto(l) ; "onMouseOut="this.style. color= 'black'; ">Koana</div> - раздел, определяющий стиль и поведение надписи Коала. При наведении указателя мыши ей задается голубой цвет, в ином случае надпись остается черной.
<div style="cursor:hand;" onMouseOver="this.style . color='blue' ;foto ( 2) ; " onMouseOut = "this.style. color='black' ; "> Пингвины</div> - раздел, определяющий стиль и поведение надписи Пингвины. При наведении указателя мыши ей задается голубой цвет, в противном случае надпись остается черной.
<div style="cursor:hand ; " onMouseOver="this. style.color='blue';foto(3) ; " onMouseOut = "this.style. color- 'black' ; "> TronbnaHbi</div> - раздел, определяющий стиль и поведение надписи Тюльпаны. При наведении указателя мыши ей задается голубой цвет, в ином случае надпись остается черной.
</div> - закрытие основного отдела надписей.
<div style="position:absolute; top:15; left:120; border-style:outset; padding:10; width:380; height:280; text-align : center; " > - открытие раздела размещения фотографий и определение его стиля. При абсолютном позиционировании указывает располагать левый верхний угол рамки в 15 пунктах сверху и 120 пунктах от левого края, задает ширину рамки 380 и ее высоту 280 пунктов, располагает объект по центру.
<img src=1. jpg id=myFoto height=280> - указывает разместить фотографии с идентификатором myFoto, задавая явную ширину изображений 280 пунктов. По умолчанию определяется изображение под именем 1.jpg.
</div></body></html> - завершение раздела, тела документа и вебстраницы.

Тэги: мыши, страницы, фотографии, именем, специально, надпись, отведенном

← Циклический алгоритм. Сценарий «Падающий снег»		Элементы формы для создания и обработки тестового опроса →