Кнопка меняющая цвет при наведении мыши.
Автор: Андрей Краснокутский
Дата: 2011-10-31 Скрипт: Кнопка изменяющая цвет при наведении курсора.
Это небольшой и простой, но очень функциональный и полезный в работе web-мастера JavaScript. Суть работы скрипта: позволяет изменять цвет кнопки при наведении на неё курсора. Ниже Вы видите пример работы скрипта.
Работает во всех распространенных браузерах, кроме Firefox. Как Вы понимаете использовать можно как в виде отдельных кнопок, так и создав целое меню для сайта из таких кнопок.
А теперь смотрим код Листинга 1:
Листинг 1.
<html>
<head>
<title>Кнопка, меняющая цвет при наведении курсор</title>
<style type="text/css">
.bigChange {color:#006600; font-weight:bolder; font-size:175%; letter-spacing:4px; text-transform: uppercase; background:yellow}
.start {color:yellow; background:#006600; bolder: Lime; }
</STYLE>
</head>
<body>
<SCRIPT LANGUAGE=JAVASCRIPT>
function highlightButton(s) {
if ("INPUT"==event.srcElement.tagName)
event.srcElement.className=s
}
</SCRIPT>
<FORM NAME=highlight onmouseover="highlightButton('start')" onmouseout="highlightButton('')">
<input type="button" value="Отправить" style="border-color: #ffff00;">
<input type="button" value="Главная" style="border-color: #ffff00;">
<input type="button" value="Оформить" style="border-color: #00ffсс;">
</FORM>
</body>
</html>
|
А теперь давайте разберемся с этим кодом. В Листинге 1 Вы видите практически готовый код web-страницы. Условно его можно разбить на 3 основные части.
Часть первая, располагается между тегами <head> и </head>:
<style type="text/css">
.bigChange {color:#006600; font-weight:bolder; font-size:175%; letter-spacing:4px; text-transform: uppercase; background:yellow}
.start {color:yellow; background:#006600; bolder: Lime; }
</STYLE>
Как Вы поняли это обычная таблица стилей - CSS. Отвечает за внешнее оформление кнопок, при желании эту часть можно вынести в отдельный файл каскадных таблиц стилей. Изменяйте эначение операторов и смотрите как изменяется внешний вид кнопок.
Часть вторая. Это сам скрипт, располагается в теле web-страницы (между тегами <body> и </body>. Здесь менять ничего не нужно!
<SCRIPT LANGUAGE=JAVASCRIPT>
function highlightButton(s) {
if ("INPUT"==event.srcElement.tagName)
event.srcElement.className=s
}
</SCRIPT>
Часть третья. Форма в которой расположены кнопки:
<FORM NAME=highlight onmouseover="highlightButton('start')" onmouseout="highlightButton('')">
<input type="button" value="Отправить" style="border-color: #ffff00;">
<input type="button" value="Главная" style="border-color: #ffff00;">
<input type="button" value="Оформить" style="border-color: #00ffсс;">
</FORM>
На этой странице выше, Вы видите три кнопки. За каждую кнопку отвечает отдельная строчка. Вот код первой кнопки Отправить:
<input type="button" value="Отправить" style="border-color: #ffff00;">
Добавляя или убирая такую строчку в код, добиваемся нужного количества кнопок, в этой же строке редактируется внешний вид кнопки.
Как видите все очень просто.
Удачи Вам.
Читайте так же:
Реселлинг – перспективный интернет-бизнес.
Как научиться создавать сайты самостоятельно? Это очень просто!
Бесплатные сервисы Почтовых Рассылок.
Почему большинство людей, не добиваются успеха?
Что такое Cron и как с ним работать?
От чего зависит скорость загрузки web-страниц?
Просмотров: 24429
"Добавляя или убирая такую строчку в код, добиваемся нужного количества кнопок, в этой же строке редактируется внешний вид кнопки."
Да, количество и название кнопок можно сделать любым, но они - мёртвые, нужно еще код ссылки прописать каждой кнопке!
А как изменить вид данной ссылки (например фон), при наведении на другую ссылку курсора мыши?
Отличное объяснение! Спасибо!
Все получилось, но как вставить ссылку?
Попробовал так:
<a href="ssilka.html"><input type="button" value=" ссылка " style="border-color: #00ffсс;" </a>
Появляется линия на кнопке и МЕЖДУ кнопками!?
вроде получилось,но перенёс к себе на сайт,прописал и......-цвет другой и как ссылка не работает
А как расположить их по вертикали???
блин как поменять цвет курсора?
Андрей, подскажите, пожалуйста, а как изменить в Вашем примере размер и цвет кнопок? Спасибо.
|