Информация

"4admins.ru" Рекомендует

Подсветка картинки или создание кнопки

  • Автор 
    Сообщение
Аватара пользователя
Сообщения: 18
Зарегистрирован: 23 мар 2011, 15:12
Благодарил (а): 15
Поблагодарили: 3 раз в 3 сообщениях
Город: Serov-City
Пол: Мужской
Адрес форума: http://jagplay.ekafe.ru
Баллы репутации: 0

Подсветка картинки или создание кнопки

Сообщение Добавлено: 06 мар 2013, 16:48

Здравствуйте, уважаемые админы форумов. Наверное, многие из вас хотели бы сделать подсвечивающеюся кнопочку или картинку на страницах своих форумов, то есть когда наводишь курсор она меняет цвет либо ставиться ярче или тускнее в общем тут уж как у вас разыграется фантазия :)

Допустим вы нашли где-то понравившуюся вам картинку(кнопку), а может нарисовали сами и хотите ее использовать как кнопку на страницах форама.

Вот кнопка которую я покажу как пример(которая используеться у меня на форуме) Изображение
Добавить ее на страницы форума очень просто. Если закинуть ее в желаемый для вас шаблон, код такой:
Код: Выделить всё
<img src="полный адрес кнопки" alt="кнопка"  title="кнопка"  width="100" height="100"/>

Сделать ее ссылкой тоже не проблема, достаточно обернуть код в тег ссылки:
Код: Выделить всё
<a href="ссылка куда ведёт кнопка"><img title="кнопка" src="полный адрес кнопки" alt="кнопка" width="100" height="100" /></a>

Но вам хочется, чтобы при наведении кнопка подсвечивалась. Это можно сделать следующим способом. Сейчас мы его с вами рассмотрим :)

Подсветка за счет подстановки другого изображения.
Способ подсветить картинку – это сделать еще одну картинку другого цвета или более светлую и подставлять ее при наведении курсора.
Для этого открываем картинку любым графическим редактором и делаем ее более светлой или добавляем какой-нибудь оттенок. Сейчас любая программа для работы с изображениями позволяет это делать(я пользуюсь программой Photoshop CS6). Сохраняем ее под другим именем.
В результате мы получаем две кнопки с названиями poker1 и poker2
Изображение Изображение
Сейчас для того, чтобы при наведении курсора мыши кнопка менялась с серо-зелёной на ярко-зелёную, используем следующий код в шаблон форума(может быть любым, смотря где вы хотите расположить данныю кнопку):
Код: Выделить всё
<a href="ссылка куда ведёт кнопка"><img title="кнопка покер" onmouseover="this.src='http://адрес форума/storage/images/poker1.png';" onmouseout="this.src='http://адрес форума/storage/images/poker2.png';" src="http://адрес форума/storage/images/poker2.png" alt="кнопка покер" /></a>

Пример можите посмотреть у меня на форуме jagplay.ekafe.ru

Можно сделать и по-другому. В теме вашего стиля CSS (обычно файл style.css вашего стиля) добавить код, при этом имя идентификатора можно придумать любое, в маем случае img-poker:
Код: Выделить всё
#img-poker  a img{background-image: url('http://адрес форума/storage/images/poker2.png'); width:100px; height:100px;}
#img-poker a img:hover {background-image: url('http://адрес форума/storage/images/poker1.png');}

А нашу ссылку-кнопку обернуть в тег div с нужным идентификатором, с тега img при этом исключаем параметр src и alt
Код: Выделить всё
<div id="img-poker"><a href="ссылка куда ведёт кнопка"><img title="кнопка бабло" width="100" height="100" /></a></div>

Результат получаем тот же :wink:
Что ж надеюсь вам данный мини-урок кнопки понравился и вы им воспользуютесь.

За это сообщение пользователя FIHER55 поблагодарили:
Ариан

Вернуться в Скрипты

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1