Создание эффекта подмены изображения
Задача:При наведении курсора мыши на изображение подвала - производить его замену на изображение шапки сайта (см.рис. 17). Данный эффект необходимо реализовать из JavaScript.
Для выполнения этой задачи перейдем в нижнюю часть файлаindex.php
Рис. 10.17
Изображение в самой нижней части сайта выводится при помощи тега:
<img src="img/podval.png" width="980" height="50" border="0" />
Подключим к этому тегу два обработчика события: при наведении курсора мыши и при удалении курсора мыши:
<img src="img/podval.png" width="980" height="50" border="0"
onmouseover=""
onmouseout=""
/>
Итак, нам нужно, чтобы при наведении курсора мыши, изображениеpodval.png менялось на shapka.pngа при удалении курсора вновь возвращалось podval.png.
Чтобы обратиться к текущему тегу, в JavaScriptиспользуется слово: this–в переводе –"этот".
<img src="img/podval.png" width="980" height="50" border="0"
onmouseover="this.src='img/shapka.png'"
onmouseout="this.src='img/podval.png'"
/>
Изменяя значение атрибута src, мы подменяем изображение. Обратите внимание,что картинка shapka.pngсжимается под размеры картинкиpodval.png.Посмотрим в браузере на полученный результат. При наведении курсора мыши на нижнюю часть сайта появляется картинка шапки сайта (см. рис. 17).
В принципе, подобный эффект можно было выполнить и из CSS. Но из JavaScript можно создавать более интересные эффекты, этот язык позволяет реализовать сложные алгоритмы.
Как и с Flash, при использованииJavaScriptважно не перестараться с изобилием графических эффектов, которые могут начать раздражать пользователя.
Создание эффекта появления изображения
Задача:При входе на домашнюю страницу требуется создать эффект появления верхнего изображения сайта. Изображение должно увеличиваться одновременно по ширине и высоте (см. рис. 18). Эффект появления должен длиться одну секунду.
Реализация эффекта появления изображения сложнее, чем эффект подмены изображения.
Рис. 10.18
Перейдем в верхнюю часть файла index.php, для тега body добавим обработчик события при загрузке страницы:
<body onload="func()">
Событие onload– событие при загрузке страницы. При загрузке страницы будет вызываться функция JavaScript –func(). Эта функция будет находиться в файле puh.js, которыйуже подключен к файлу index.php.
Найдем ячейку таблицы, в которую вставлено верхнее изображение.
Для этой ячейки укажем значения атрибутов: align–горизонтальное выравнивание, valign –вертикальное выравнивание:
<td valign="middle" width="980" align="center">
valign="middle" –выравнивание вертикально по центру,
align="center" –выравнивание горизонтально по центру.
В этом случае содержимое ячейки будет выравниваться по центру.
Для верхнего изображения, для тега img, добавим идентификатор img_logo:
<a href="index.php" target="_self">
<img src="img/shapka.png" border="0" width="980" height="150" id="img_logo" />
</a>
С помощью идентификатора мы будем обращаться к тегу с изображением из JavaScript. Осталось создать программный код JavaScript для реализации эффекта.
Изображение должно появляться из центра. Следовательно, пусть его начальные размеры нулевые.Увеличиваясь по ширине и высоте,изображение должно достигнуть своих полных размеров. Эффект должен происходить одну секунду. Для реализации такого эффекта нам понадобиться таймер (в JavaScript можно использовать таймер, так же как и в Java). Сделаем так, чтобы изменение размеров изображения происходило за 100шагов, тогда один шаг должен выполняться за 10/1000секунды. Значит, временная задержка таймера будет 10/1000секунды. Создание таймера в JavaScriptделается так:
var inter = window.setInterval(vipoln,10);
window –это обращение к окну браузера, setInterval() –указывает имя функции,которая будет вызываться и устанавливать временную задержку таймера. Через переменную inter таймер при необходимости можно удалить:
window.clearInterval(inter);
clearInterval()удаляет таймер.
Размеры изображенияshapka.png составляют 980x150, чтобы за 100шаговполучить полный размер необходимо увеличивать за один шаг на 9.8пикселя по ширине и1.5пикселя по высоте. Таймер должен изменять ширину и высоту изображения, постепенно увеличивая их.
Перейдем в файл puh.js и начнем писать программный код JavaScript:
// Переменная для таймера
var inter;
// Переменные для изменения размеров
var delta1, delta2, delta;
// Переменная для получения тега веб-страницы
var tmp;
В самом верху объявим переменные. Переменная interбудет отвечать за таймер, переменная delta1будет хранить текущую ширину,переменная delta2будет хранить текущую высоту, переменнаяdeltaбудет хранить количество выполненных шагов,переменная tmp будет использоваться для работы с тегом. Под переменными запишем функцию:
// Функция, выполняющая изменение размеров изображения
function vipoln()
{
delta1+=9.8; //Увеличиваем ширину
delta2+=1.5; //Увеличиваем высоту
delta++; //Считаем количество шагов
//Устанавливаем CSS для ширины
tmp.style.width = ""+delta1+"px";
//Устанавливаем CSS для высоты
tmp.style.height = ""+delta2+"px";
// Если уже выполнено 100 шагов
if (delta>=100)
{
//Устанавливаем настоящие размеры изображения
tmp.style.width = "980px";
tmp.style.height = "150px";
// Удаляем таймер
window.clearInterval(inter);
}
}
Функция vipoln()будет вызываться таймером через каждые 10/1000 секунды.
delta1+=9.8; // Увеличиваем ширину
delta2+=1.5; //Увеличиваем высоту
delta++; //Считаем количество шагов
Сначала увеличиваем ширину, высоту и количество проделанных шагов.
//Устанавливаем CSS для ширины
tmp.style.width = ""+delta1+"px";
//Устанавливаем CSS для высоты
tmp.style.height = ""+delta2+"px";
Далее устанавливаемCSS-свойства ширины и высоты изображения. Обратите внимание, что значения CSSявляются строковым типом данных и указываются в кавычках.
// Если уже выполнено 100 шагов
if (delta>=100)
Если уже выполнено100шагов –это значит, что пора установить нормальные размеры изображения и остановить таймер:
// Устанавливаем настоящие размеры изображения
tmp.style.width = "980px";
tmp.style.height = "150px";
// Удаляем таймер
window.clearInterval(inter);
Ниже в файле puh.js необходимо создать еще одну функцию:
// Функция, которая вызывается при загрузке страницы
function func()
{
// Определяем текущий адрес (ссылку)
var str = location.href;
// Проверяем, что в адресе нет символа равно: '='
if (str.indexOf('=', 0)>=0) return;
// Попытка-исключение
try
{
//Находим тег верхнего изображения по идентификатору
tmp = document.getElementById("img_logo");
}
catch (e)
{
return;
}
// Устанавливаем начальные значения ширины, высоты
// и количества шагов по нулям
delta=0;
delta1=0;
delta2=0;
// Запускаем таймер с выполнением функции через
// с указанным интервалом
inter = window.setInterval(vipoln,10);
}
Именно функция func() вызывается в обработчике события при загрузке страницы.
// Определяем текущий адрес (ссылку)
var str = location.href;
Определяем текущий адрес. Это значение из адресной строки браузера. Эффект появления должен срабатывать только при переходе на домашнюю страницу, поэтому нужно определить текущий раздел. В любом разделе,кроме домашней страницы, в адресной строке имеется значение параметра id,например: http://puh/index.php?id=2.
Мы будем искать символ равенства (=),если его нет, - значит мы на домашней странице.
//Проверяем, что в адресе нет символа равно: '='
if (str.indexOf('=', 0)>=0) return;
indexOf() выполняет поиск и возвращает позицию найденного символа, если символ не найден, то возвращается: -1, второй параметр: 0 –указывает номер символа, с которого необходимо начинать поиск.
// Попытка-исключение
try
{
//Находим тег верхнего изображения по идентификатору
tmp = document.getElementById("img_logo");
}
catch (e)
{
return;
}
Далее находим тег по идентификатору. Выполняем поиск через попытку-исключение. Если тег с указанным идентификатором не будет найден –сработает блокcatch.
//Устанавливаем начальные значения ширины,высоты
// и количества шагов по нулям
delta=0;
delta1=0;
delta2=0;
Перед запуском таймера устанавливаем начальные значения переменных: количество выполненных шагов,ширина, высота.
// Запускаем таймер с выполнением функции через
// с указанным интервалом
inter = window.setInterval(vipoln,10);
В самом конце функции запускаем таймер.
Получается следующая схема вызова функций: каждый раз при загрузке страницы вызывается функцияfunc(). Если это домашняя страница (раздел Главная), то запускается таймер. Таймер с интервалом10/1000 секунды вызывает функцию vipoln(). Когда проходит одна секунда –таймер удаляется внутри функции vipoln().
Посмотрим на результат в браузере. При переходе в раздел Главная, запускается эффект появления верхнего изображения.
Итог занятия:На этом занятии мы:• добавили содержимое двух разделов сайта: Главная, Контакты;• поговорили о предназначении JavaScript;• сделали два визуальных эффекта при помощи JavaScript.