Скрипты и шаблоны для uCoz - 3aKa4Ka
Каталог файлов | Иконки групп | Видео уроки | Статьи | PSD исходники | SEO софт/программы | SEO новости
Скрипты для uCoz Шаблоны для uCoz
Меню сайта
Категории
Создание сайта [6]
С чего начать, что делать?
SEO оптимизация [76]
Статьи о том как раскрутить сайт
HTML [11]
Основы и интересные решения
CSS [11]
Основы и интересные решения
uCoz [32]
Новичкам и профессионалам
Заработок на сайте [4]
Как заработать с помощью сайта
Новое на форуме ↓
Новые комментарии
Кто на сайте
Онлайн всего: 2
Гостей: 2
Пользователей: 0

Сайт сегодня посетили:

Делаем ролловер с помощью CSS спрайтов

Главная » Статьи веб мастеру » CSS » Делаем ролловер с помощью CSS спрайтов

Посмотреть ДЕМО
Ролловеры (меню, вид которых меняется при наведении на них мышкой) обычно состоят из нескольких состояний. Основные состояния: при наведенной мышке, при нажатии, после нажатия. Для каждого состояния требуется отдельная картинка. В таком случае меню получается довольно тяжелое, так как для каждой кнопки приходится грузить несколько изображений.

Используя спрайты можно обойти эту проблему. Используется всего лишь одна картинка, и она не так сильно грузит сервер и потребляет трафик. Это очень полезно, если полностью пользоваться мощностью данной технологии.

Струтктура меню очень простая. Ее мы вставляем в тело документа:

Code
<div id="menu">
  <a href="">Menu item 1</a>
  <a href="">Item no. 2</a>
  <a href="">Another (3)</a>
  <a href="">Menu item 4</a>
  <a href="">One more (5)</a>
</div>

Если бы мы не пользовались спрайтами, CSS код выглядел бы следующим образом:

Code
#menu a {
  ...
  background: url("button.gif") top left no-repeat;
  }
  #menu a:hover {

  ...
  background-image: url("button-over.gif");
  }
  #menu a:active {
  ...
  background-image: url("button-active.gif");
  }
  /* etc... */

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

Используя одну картинку, нам нет необходимости менять фоновое изображение. Мы только меняем расположение фона. Например, состояние :hover будет использовать фон сдвинутый на необходимое количество пикселей влево (в примере 157 пикселей); состояние :active - 314 пикселей.

И код CSS обретет вот такой вид:

Code
#menu a {
  background: url("button.gif") 0 0 no-repeat;
  ...
  }
#menu a:hover {
  background-position: -157px 0;
  ...
  }
#menu a:active {
  background-position: -314px 0;
  ...
  }

Вот и все. Смена состояний очень быстра и не забирает много трафика. Подобное меню кроссбраузерно (IE5+, Mozilla, Opera, Safari)

Исходники


Просмотров: 930 | Комментариев: 0 | Категория: CSS | Опубликовал: vsebudetok | Спасибо сайту

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
© 3aka4ka.at.ua 2008 - 2024г. Все материалы размещенные на сайте принадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.