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

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

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

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

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)
используется отдельная картинка для каждого состояния в качестве фонового изображения.

Внимание ! копирование запрешено ! В случае копирования статьи ссылку на наш сайт обьязательно !

Добавил : NeOX | Категория : CSS & HTML | Просмотров : (250) | Автор материала: UcozTracker.ru | Теги :

А также смотрите:

Оптимизация форума uCoz.

Как заработать на своем сайте

Прозрачность (css opacity, javascript opacity)

Как ускорить индексацию сайта 18 главных способов

Делаем фиксированную панель навигации с помощью CSS

Поисковые системы и каталоги.

Тэг Title, важность для seo тэга Тайтл

Подбираем тематику для сайта.

Как повысить ТиЦ?

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