ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Меняем картинку

Меняем картинк

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

Как картинка меняет цвет? Для создания этого эффекта использовались обработчики событий onMouseOver и onMouseOut.

Воспользуемся данными командами для создания эффекта Меняем картинку.

Для рассмотрения примера с эффектом Меняем картинку подготовим две картинки.

Картинка1 Картинка2

Скопируйте их в свою папку.

Пишем скрипт.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Меняем картинку</title>
</head>

<body>
<a href="44.html" onMouseOver="document.doc.src='../images/java21.gif'" onMouseOut="document.doc.src='../images/java22.gif'">
<img src="../images/java21.gif" width="300" height="210" border="1" name="doc"></a>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Разберем скрипт.

Мы использовали гипертекстовую ссылку, где "44.html"-URL-адрес нашего документа. Далее идут обработчики событий. Когда наводите курсор на картинку, появляется sp.gif. Когда убираете курсор с картинки, возвращается sp1.gif.

Обратите внимание, что команда img связана с обработчиками onMouse в команде href через команду name="doc". Не имеет значения, сколько изображений у вас на странице и в каком порядке они располагаются, если вы присвоили отдельное имя каждой нужной картинке.

  • onMouseOver и onMouseOut различают регистр. Нельзя менять заглавные и строчные буквы.
  • Так как необходимо ставить кавычки после onMouseOver = и onMouseOut =, название файла*.gif ставится в одинарные кавычки.
  • document.doc.src следует иерархии объектов, о которой мы говорили ранее. Documentотносится к объекту документ, a sp1— это имя объекта изображение (имя можно придумать какое угодно). src (источник) — это свойство объекта изображение, которое указывает файл с картинкой.
  • В этом примере onMouseOver меняет источник изображения на java21.gif.
  • ОnMouseOut заставляет объект изображение показывать java22.gif.
  • Для наилучшего эффекта картинки имееют одинаковый размер.

А теперь давайте сделаем тоже, но с использованием функции.

Пишем скрипт.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Меняем картинку</title>

<script language="JavaScript">
function upopen()
{

document.car.src="../images/java21.gif"
}
function onopen()
{

document.car.src="../images/java22.gif"
}
</script>

</head>

<body>
<a href="46.html" onMouseOver="upopen()" onMouseOut="onopen()">
<img src="../images/java21.gif" name="car" border="0"></a>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Как видите ничего не изменилось, кроме того что команды на смену картинки приходят через функции. Функция upopen()открывает java21.gif, а функция onopen() возвращает первую картинку. Функция необходима, если мы хотим многократно использовать картинки, например сделать анимацию.

Если вы щелкните мышью по картинке, то картинка поменяет цвет. Ни какого эффекта здесь нет. Просто вы перейдете на другой файл с таким же рисунком.

А теперь давайте создадим кнопку, которая при наведении курсора будет изменять ее цвет.

Пишем скрипт.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Меняем цвет</title>
<style>
.buttonborder{ border:3px solid #00FF00; background-color: #FF0000;}
.duttonborder1{ border:3px solid #FF0000; background-color: #FFFF00; color: #0000FF; font-weight:bold;}
</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().