Онлайн учебник по HTML и JAVASCRIPT

Элементы языков HTML и JAVASCRIPT

Примеры скриптов

Здесь мы приведем несколько простых скриптов, которое в том или ином виде часто применяются в Web-страницах. Все они создают некоторые визуальные эффекты.
Другие примеры с пояснениями можно найти на сайте автора по адресу www.admiral.ru/~dunaev.

Смена картинки

В данном примере наведение указателя мыши на картинку приводит к изменению изображения. Когда указатель покидает картинку, изображение приобретает первоначальный вид.

Картинка на странице определяется, как известно, тегом <IMG>. Атрибут SRC задает файл с изображением. Нам необходимо изменить значение атрибута SRC при наступлении события, связанного с указателем мыши. Когда указатель мыши попадает в область, занятую каким-либо объектом, возникает событие onMouseOver, а когда он покидает эту область, наступает событие onMouseOut.

Пусть первоначально на странице находится картинка из файла pictl.gif, а заменять ее мы хотим картинкой из файла pict2.gif. Тогда соответствующий HTML-код будет иметь следующий вид:

В этом примере мы обращаемся к объекту через коллекцию all() всех элементов HTML-документа, указывая идентификатор id нужного элемента. Поскольку выражения, которые следует выполнить при наступлении событий, просты, мы не стали заводить для скрипта отдельный раздел, ограниченный тегами <SCRIPT> и </SCRIPT>.

Теперь рассмотрим пример, в котором изображение изменяется при щелчке кнопкой мыши на картинке. Понятно, что картинка должна реагировать на событие onСlick. В отличие от предыдущего примера нам потребуется счетчик щелчков, а лучше сказать — триггер, который при щелчке принимает одно из двух значений (0 или I). Это необходимо, чтобы знать, какое именно изображение показывать. Если значение триггера равно 0, то при щелчке оно изменяется на I и показывается картинка pict2.gif. Если значение триггера равно I, то при щелчке оно изменяется на 0, и показывается картинка pictl.gif.

<HTML> <SCRIPT>
var img_click=0; // триггер
function changeimg ()
{
if (img_click)
{document.all('myimge').src='pictl.gif1; img_clickl=0}; else
{document.all ('myimge') .src='pict2.gif; img_clickl=l};
}
</SCRIPT>
<IMG id="myimage" SRC="pictl. gif" onClick="c'hangeimg () ">
</HTML>

В данном примере скрипт должен быть загружен раньше тега <IMG>, чтобы переменная img_click инициализировалась раньше, чем кто-нибудь щелкнет на картинке.

Если нам необходимо, чтобы при щелчке на кнопке с картинкой изменялся вид последней, то в приведенном выше коде следует вместо тега <IMG> подставить следующие теги:

<BUTTON onclick="changeimg()">
<image src="pict.gif" id="myimage">
Нажми меня</ВUTTON>