Rollover элементы. Создаём иконку — хамелеон ^_^ .

2
486

Взаимодействие курсора мыши на какой-то элемент и визульное изменение этого элемента и есть — Rellover эффект. Будь-то меню или кнопка rss, суть одна и та-же.

Меняющие цвет элементы это  симпатично с точки зрения дизайна и этот трюк достаточно важен в отношении юзабилити вашего сайта. Да и вообще немного оживляет страничку ;).

В данной статье я расскажу как реализовать и внедрить rellover элементы на Вашу вэб-страницу :).

1. Прозрачная иконка + подмена фона.

В первом способе используется всего одно изображение. Смена цвета при наведении курсора происходит путём подмены заднего фона под иконкой/логотипом.

Также стоить отметить, что иконка должна быть прозрачной. Наиболее подходящий формат — PNG.

Сама иконка —

twitter rellover

 

Назовём её соответствующе только покороче :). Например: tw.png.

Копируем иконки в корень вашего сайта/блога в папку “image”. В случае WP — /public_html/wp-content/themes/текущая_тема/images

Ну или просто любую другую папку и прописываете абсолютный адрес к вашей иконке.

Прописываем правило CSS:

[codesyntax lang="css"]
a.tw_rollover {
display:block;
width:50px;
height:50px;
background:#b8e0fd url(images/twr.png); /*иконка будет бледно-голубого цвета*/
text-indent: -9999px;
}
a.tw_rollover:hover {
background-color:#0096ff; /*при наведении на иконку, она станет голубой*/
text-indent: -9999px;
}
[/codesyntax]

 

Тут важно понять, что поскольку в правиле мы задаём цвет подложки, в данном случае для твиттера, определённого цвета, то для другой иконки эти цвета уже могут не подойти. Поэтому для других элементов нужно создавать своё правило.

В том месте где необходимо вывести rollover элементы, прописываем:

[codesyntax lang="php"]
<a class="tw_rollover" title="Давайте дружить." href="http://twitter.com/OlegS9">Давайте дружить</a>
[/codesyntax]

Давайте дружить

2. Смена изображений посредством CSS спрайтов.

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

Чтобы было более понятно – будем использовать данные изображение :

RolloverRollover

Возникает вопрос: как используя два файла, реализовать задуманное с помощью одного ?

А вот как. Есть такая технология именуемая sprite css. Несколько изображений помещаются в одно. А в самом коде, CSS, задаётся координаты нужного  участка изображения. Спрайты бывают как и из двух элементов, так и состоящие из гораздо большего количества всяких иконок , кнопок и логотипов. Данный метод широко используется и не спроста. Графические файлы это естественно красиво , ярко, но вместе с этим и нагрузка на ресурс. И местами довольно большая. В данной технологии выигрывает и веб-мастер, есть возможность использовать любые дизайнерские штучки, так и пользователь который будет, по крайней мере, не раздражён скоростью загрузки сайта.

Пора переходить к воплощению. Чтобы не маяться с созданием спрайта, воспользуемся генератором спрайтов.

Если всё-охота всё делать самому, координаты в photoshop можно узнать по линейке.

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

Rollover

Самое здесь важное – сохранить само изображение и скопировать координаты ( background-position: …)

Теперь нам необходимо создать CSS правило для нового класса и залить катинку на удалённый компьютер.

Картинку заливаем в папочку image как и в предыдущем шаге.

Открывает файл отвечающий за CSS стили вашего ресурса (style.css), и добавляем туда следующий код :

 

[codesyntax lang=»css»]

a.sprite
{
background-attachment: scroll;
background-color: transparent;
background-image: url("images/csg.png");
background-repeat: no-repeat;
display: inline-block;
height: 128px;
text-indent: -9999px;
width: 128px;
background-position: 0 -175px;
}

a.sprite:hover
{
background-attachment: scroll;
background-color: transparent;
background-image: url("images/csg.png");
background-repeat: no-repeat;
display: inline-block;
height: 128px;
text-indent: -9999px;
width: 128px;
background-position: 0 0;
}

[/codesyntax]

 

Итого у нас появился новый класс — sprite и набор правил.

В нужном месте прописываем :

[codesyntax lang=»php»]

<a class="sprite" title="Давайте дружить." href="http://twitter.com/OlegS9">Давайте дружить</a>

[/codesyntax]

Поменяв, соответственно значения на свои.

Давайте дружить

Если что не понятно, либо какой-то момент освещён не в полной мере — пишем, комментируем, хаем ^_^.

C уважением OlegS9 ^_^.

2 КОММЕНТАРИИ

ОСТАВЬТЕ ОТВЕТ