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


Примеры скриптов - часть 2


<HTML> <SCRIPT>

var img_click=0; // триггер

function changeimg ()

{

if (img_click)

{document.all('myimge').src='labeltl.gif1; img_clickl=0}; else

{document.all ('myimge') .src='labelt2.gif; img_clickl=l};

}

</SCRIPT>

<IMG id="myimage" SRC="labeltl. gif" onClick="c'hangeimg () ">

</HTML>

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

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

<BUTTON onclick="changeimg()">

<image src="labelt.gif" id="myimage">

Нажми меня</ВUTTON>


Подсветка кнопок

В следующем примере на странице располагаются три кнопки серого цвета. При наведении указателя мыши на кнопку ее цвет изменяется на желтый. Здесь мы использовали стиль, чтобы задать первоначальный цвет кнопок и «вес» шрифта. При возникновении события функция changecolor (color) изменяет один из параметров стиля, а именно цвет фона backgroundColor. Цвет, который следует установить, передается функции в качестве параметра.

<HTML>

<STYLE>

.mystyle (font-weight:bold;background-color:aOaOaO}

</STYLE>

<FORM onMouseOver="changecolor('yellow')"

onMouseOut="changecolor('aOaOaO')">

<INPUT TYPE="button" VALUE="Pora" CLASS="mystyle"

onClick="alert('Вы нажали Рога')">

<INPUT TYPE="button" VALUE="Kопыта" CLASS="mystyle"

onClick="alert('Вы нажали Копыта')">

<INPUT TYPE="button" УАЫ1Е = "Хвосты" CLASS="mystyle"

onClick="alert('Вы нажали Хвосты')">

</FORM>

<SCRIPT>

function changecolor (color) // изменение цвета кнопок

{

event.srcElement.style.backgroundedоr = color;



Начало  Назад  Вперед



Книжный магазин