Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

RSS-лента

Сегодня:        Добавить в Избранное       Написать Автору        Обмен валют        Оплата сервисов

Кнопка меняющая цвет при наведении мыши.

Автор: Андрей Краснокутский

Дата: 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-страниц?

 

Просмотров: 19615


Поделитесь этой информацией со своими друзьями!


Комментарии к этой статье (уроку):

Комментарии добавил(а): Вячеслав
Дата: 2011-11-01

"Добавляя или убирая такую строчку в код, добиваемся нужного количества кнопок, в этой же строке редактируется внешний вид кнопки." Да, количество и название кнопок можно сделать любым, но они - мёртвые, нужно еще код ссылки прописать каждой кнопке!

Комментарии добавил(а): Алексей К
Дата: 2011-11-01

а для файерфокса что?

Комментарии добавил(а): Александра
Дата: 2011-12-05

А как изменить вид данной ссылки (например фон), при наведении на другую ссылку курсора мыши?

Комментарии добавил(а): Влад
Дата: 2011-11-13

Отличное объяснение! Спасибо!

Комментарии добавил(а): Влад
Дата: 2011-11-14

Все получилось, но как вставить ссылку? Попробовал так: <a href="ssilka.html"><input type="button" value=" ссылка " style="border-color: #00ffсс;" </a> Появляется линия на кнопке и МЕЖДУ кнопками!?

Комментарии добавил(а): Владимир
Дата: 2011-11-05

Большое спасибо

Комментарии добавил(а): сергей
Дата: 2011-11-07

вроде получилось,но перенёс к себе на сайт,прописал и......-цвет другой и как ссылка не работает

Комментарии добавил(а): Юрий
Дата: 2011-11-09

А как расположить их по вертикали???

Комментарии добавил(а): Ангелина
Дата: 2012-11-10

блин как поменять цвет курсора?

Комментарии добавил(а): Сергей, sv-servisvostok@yandex.ru
Дата: 2013-04-16

Андрей, подскажите, пожалуйста, а как изменить в Вашем примере размер и цвет кнопок? Спасибо.

Добавить Ваш комментарий:

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

Новости сайта


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


Почтовая рассылка

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

Видео курс по созданию сайтов: Сайт от А до Я
С нами сделать сайт
сможет даже Ребёнок!
"Сайт от А до Я"
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Деревянные дома от СПК "Ванда"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

QR код сайта www.LuksWeb.ru

Наши Аттестаты


Проверить аттестат

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT