|
|
|
|
Кнопка меняющая цвет при наведении мыши. Автор: Андрей Краснокутский Дата: 2011-10-31 Скрипт: Кнопка изменяющая цвет при наведении курсора.Это небольшой и простой, но очень функциональный и полезный в работе web-мастера JavaScript. Суть работы скрипта: позволяет изменять цвет кнопки при наведении на неё курсора. Ниже Вы видите пример работы скрипта. Работает во всех распространенных браузерах, кроме Firefox. Как Вы понимаете использовать можно как в виде отдельных кнопок, так и создав целое меню для сайта из таких кнопок. А теперь смотрим код Листинга 1: Листинг 1.
А теперь давайте разберемся с этим кодом. В Листинге 1 Вы видите практически готовый код web-страницы. Условно его можно разбить на 3 основные части. Часть первая, располагается между тегами <head> и </head>: <style type="text/css"> Как Вы поняли это обычная таблица стилей - CSS. Отвечает за внешнее оформление кнопок, при желании эту часть можно вынести в отдельный файл каскадных таблиц стилей. Изменяйте эначение операторов и смотрите как изменяется внешний вид кнопок. Часть вторая. Это сам скрипт, располагается в теле web-страницы (между тегами <body> и </body>. Здесь менять ничего не нужно! <SCRIPT LANGUAGE=JAVASCRIPT> Часть третья. Форма в которой расположены кнопки: <FORM NAME=highlight onmouseover="highlightButton('start')" onmouseout="highlightButton('')"> На этой странице выше, Вы видите три кнопки. За каждую кнопку отвечает отдельная строчка. Вот код первой кнопки Отправить: <input type="button" value="Отправить" style="border-color: #ffff00;"> Добавляя или убирая такую строчку в код, добиваемся нужного количества кнопок, в этой же строке редактируется внешний вид кнопки. Как видите все очень просто. Удачи Вам.
Читайте так же: Реселлинг – перспективный интернет-бизнес. Как научиться создавать сайты самостоятельно? Это очень просто! Бесплатные сервисы Почтовых Рассылок. Почему большинство людей, не добиваются успеха? Что такое Cron и как с ним работать? От чего зависит скорость загрузки web-страниц?
Просмотров: 22965 Поделитесь этой информацией со своими друзьями! Комментарии к этой статье (уроку): Комментарии добавил(а): Вячеслав "Добавляя или убирая такую строчку в код, добиваемся нужного количества кнопок, в этой же строке редактируется внешний вид кнопки." Да, количество и название кнопок можно сделать любым, но они - мёртвые, нужно еще код ссылки прописать каждой кнопке! Комментарии добавил(а): Алексей К а для файерфокса что? Комментарии добавил(а): Александра А как изменить вид данной ссылки (например фон), при наведении на другую ссылку курсора мыши? Комментарии добавил(а): Влад Отличное объяснение! Спасибо! Комментарии добавил(а): Влад Все получилось, но как вставить ссылку? Попробовал так: <a href="ssilka.html"><input type="button" value=" ссылка " style="border-color: #00ffсс;" </a> Появляется линия на кнопке и МЕЖДУ кнопками!? Комментарии добавил(а): Владимир Большое спасибо Комментарии добавил(а): сергей вроде получилось,но перенёс к себе на сайт,прописал и......-цвет другой и как ссылка не работает Комментарии добавил(а): Юрий А как расположить их по вертикали??? Комментарии добавил(а): Ангелина блин как поменять цвет курсора? Комментарии добавил(а): Сергей, sv-servisvostok@yandex.ru Андрей, подскажите, пожалуйста, а как изменить в Вашем примере размер и цвет кнопок? Спасибо. Добавить Ваш комментарий: |
Новости сайта Домены 
Google Adsense |
Навигация
Видео Курсы
Последние заметки
Новости сайта
Архив 2016 год: 2015 год: 2014 год: 2013 год: 2012 год: 2011 год: 2010 год: 2009 год: 2008 год: Сайты друзей Наши ссылки
Если Вам понравился  Наши Аттестаты
|
|
Разрешается полное или частичное копирование материалов сайта с обязательным |