Допустим вы нашли где-то понравившуюся вам картинку(кнопку), а может нарисовали сами и хотите ее использовать как кнопку на страницах форама.
Вот кнопка которую я покажу как пример(которая используеться у меня на форуме)
Добавить ее на страницы форума очень просто. Если закинуть ее в желаемый для вас шаблон, код такой:
- Код: Выделить всё
<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>
Результат получаем тот же
Что ж надеюсь вам данный мини-урок кнопки понравился и вы им воспользуютесь.