Веб-инструмент
Веб-мастерская
Вспомним, как в одном из уроков, текст в строке состояния менялся при наведении курсора на ссылку. Когда курсор уводили со ссылки, текст в строке состояния принимал первоначальное значение.
Как картинка меняет цвет? Для создания этого эффекта использовались обработчики событий onMouseOver и onMouseOut.
Воспользуемся данными командами для создания эффекта Меняем картинку.
Для рассмотрения примера с эффектом Меняем картинку подготовим две картинки.
Скопируйте их в свою папку.
Пишем скрипт.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меняем картинку</title>
</head>
<body>
<a href="75.html" onMouseOver="document.doc.src='images/sp1.gif'" onMouseOut="document.doc.src='images/sp.gif'">
<img src="images/sp.gif" width="300" height="210" border="1" name="doc"></a>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Разберем скрипт.
Мы использовали гипертекстовую ссылку, где "75.html"-URL-адрес нашего документа. Далее идут обработчики событий. Когда наводите курсор на картинку, появляется sp.gif. Когда убираете курсор с картинки, возвращается sp1.gif.
Обратите внимание, что команда igm связана с обработчиками onMouse в команде href через команду name="doc". Не имеет значения, сколько изображений у вас на странице и в каком порядке они располагаются, если вы присвоили отдельное имя каждой нужной картинке.
А теперь давайте сделаем тоже, но с использованием функции.
Пишем скрипт.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меняем картинку</title>
<script language="JavaScript">
function upopen()
{
document.car.src="images/sp.gif"
}
function onopen()
{
document.car.src="images/sp1.gif"
}
</script>
</head>
<body>
<a href="82.html" onMouseOver="upopen()" onMouseOut="onopen()">
<img src="images/sp1.gif" name="car" border="0"></a>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Как видите ничего не изменилось, кроме того что команды на смену картинки приходят через функции. Функция upopen()открывает sp.gif, а функция onopen() возвращает первую картинку. Функция необходима, если мы хотим многократно использовать картинки, например сделать анимацию.
Если вы щелкните мышью по картинке, то картинка поменяет цвет. Ни какого эффекта здесь нет. Просто вы перейдете на другой файл с таким же рисунком.
А теперь давайте создадим кнопку, которая при наведении курсора будет изменять ее цвет.
Пишем скрипт.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меняем цвет</title>
<style>
.buttonborder{ border:3px solid #00FF00; background-color: #FF0000;}
.duttonborder1{ border:3px solid #FF0000; background-color: #FFFF00; color: #0000FF;}
</style>
<script language="JavaScript">
function myBut(){
a=document.getElementById("button");
a.className="duttonborder1";
}
function myBut1(){
a=document.getElementById("button");
a.className="duttonborder";
}
</script>
</head>
<body>
<form action="" method="get">
<input name="" type="submit" value="Отправить" class="buttonborder1" id="button" onMouseOver="myBut()"; onMouseOut="myBut1()">
</form>
</body>
</html>
В окне веб-браузера это будет выглядеть ТАК.
Разберем скрипт и последовательность действий.
Для начала мы создали форму с кнопкой типа "submit"и придали ей значение value="Отправить".
В окне веб-браузера это будет выглядеть ТАК.
Так как нам надо создать кнопку, при при наведении курсора меняющую цвет рамки и фона, то для этого создадим для кнопки новый стиль. Назовем его .buttonborder . Зададим для кнопки толщину рамки, цвет рамки и фон.
{ border:3px solid #00FF00; background-color: #FF0000;}
Для того, чтобы применить созданный стиль к кнопке ввели атрибут class и присвоили ему имя стиля .buttonborder.
Теперь это будет выглядеть ТАК.
Теперь нам надо сделать так, чтобы при наведении мышкой менялся цвет рамки и фон.
Для этого мы создали еще один стиль со следующими параметрами { border:3px solid #FF0000; background-color: #FFFF00; color: #0000FF;} и назовем его .duttonborder1.
Теперь заменим в атрибуте class стиль .buttonborder на .buttonborder1.
class="buttonborder1"
Теперь это будет выглядеть ТАК.
Теперь нам надо создать функцию, которая при наведении мышки будет менять один стиль на другой.
Но перед созданием функции создадим и присвоим с помощью атрибута id элементу "кнопка" уникальный идентификатор и присвоим ему имя "button".
id = "button"
<script language = "JavaScript">
function myBut(){
a = document.getElementById("button");
a.className = "duttonborder1";
}
</script>
Назовем функцию myBut(). Далее создадим переменную document и пишем команду получить элемент "кнопка" getElementById("button"). Назовeм переменную а.
Дальше обозначим класс элемента a.className="duttonborder1", где duttonborder1имя стиля.
Теперь нам надо определить при каком событии кнопка будет реагировать при наведении мышки. Такой командой является событие onMouseOver, которое вызовет функцию myBut().
Теперь это будет выглядеть ТАК.
Теперь нам при возврате мышки в исходное положение, надо вернуть цвет кнопки в тоже положение.
Для этого пишем еще одну функцию. Она очень похожа на первую. Даем ей название myBut1() и внесем еще одно изменение. Зададим классу a.className стиль duttonborder. Чтобы кнопка вернулась в исходное положение применим команду onMouseOut, которая и вызовет функцию myBut1().
Теперь это это будет выглядеть ТАК.
Обсудить на форуме