JavaScript. Основы клиентского программирования. Захаркина В.В. - 26 стр.

UptoLike

ВУЗ: 

СПбГУ | Санкт-Петербург

Составители: 

Рубрика: 

50
Еще немного о смене изображений
В любом сценарии, в частности и при организации смены
изображений, надо стараться сделать код рациональным. Вот очень
простой, но вполне эффектный пример: при наведении курсора мыши
на миниатюры меняется увеличенное изображение. Файлы
изображений находятся в каталоге Images и называются 1.jpg, 2.jpg и
3.jpg. Файлы миниатюр называются так же и находятся в
подкаталоге
Images/Thumbs.
Понятно, что надо выполнить предварительную подгрузку и написать
функцию, реализующую смену изображений.
В начале сценария определим переменную
imageDir = 'Images/'
и рассмотрим три варианта.
1 вариант
Функция:
function changeImg(imgAddr)
{
document.bigImg.src = imgAddr
}
51
Вызов функции (например, для 1-ой миниатюры):
<img src="Images/Thumbs/1.jpg"
width="50" height="50"
onMouseOver="changeImg('Images/1.jpg')">
2 вариант
Пользуемся тем, что имена файлов изображений представляют
последовательность 1.jpg , 2.jpg ... и находятся в каталоге
imageDir. Функция слегка изменилась:
function changeImg(imgAddr)
{
document.bigImg.src = imageDir + imgAddr +
'.jpg'
}
Вызов функции получился короче и прозрачнее:
<img src="Images/Thumbs/1.jpg"
width="50" height="50"
onMouseOver="changeImg(1)">
3 вариант
А если к тому же динамически сформировать последовательности
миниатюр (ведь их могло бы быть
много), получится совсем
компактно. Пользуясь тем, что имена файлов изображений
представляют последовательность 1.jpg , 2.jpg, выведем
изображения в цикле, используя метод write() объекта document.
for (i=1; i<=3; i++)
document.write(
'<img src="Images/Thumbs/' +
i + '.jpg" width="50" height="50" ' +
'onMouseOver="changeImg(' + i + ')">');

Страницы