Иллюстрированный самоучитель по Web-графике

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

Здесь мы приведем несколько простых скриптов, которое в том или ином виде часто применяются в Web-страницах. Все они создают некоторые визуальные эффекты.

Другие примеры с пояснениями можно найти на сайте автора по адресу www.admiral.ru/~dunaev.

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

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

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

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

<HTML>
<IMG id="myimage" SRC="labeltl.gif" onMouseOver="document.all('myimage').src='labelt2.gif'" onMouseOut="document.all('myimage').src='labeltll.gif'">
  
</HTML>

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

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

<HTML>
<SCRIPT>
    var img_click = 0; // триггер
    function changeimg() {
        if (img_click) {
            document.all('myimge').src = 'labelt1.gif; img_click=0';
        } else {
            document.all('myimge').src = 'labelt2.gif; img_click=1';
        }
    }
</SCRIPT>
<IMG id="myimage" SRC="labelt1.gif" onClick="changeimg()">
  
</HTML>

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

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

<BUTTON onclick="changeimg()">
    <image src="labelt.gif" id="myimage">Нажми меня</BUTTON>
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.