Новое
Новое для uCoz	Новое на форуме
+ Новый переключатель страниц для ucoz + Прикольные флэш часы для сайта + Красивый поиск по сайту + Блок - Помоги сайту + Очень красивый мини профиль + Скрипт WebMoney для uCoz	+ Мини-профиль + Темный мини-чат для uCoz + Новый отличный поск по сайту + Красивое меню для сайта Ucoz + Информер популярных материалов + Плеер для проигрывания мп3 на сайте
Новое для Photoshop	Новые Программы
+ Свадебное поздравление - Наказ жениху 1 + Шаблон для фотомонтажа - парень с машиной + Летняя детская рамка для фотошопа – Как то летом на лужку + Кисти для фотошопа в виде разделителей + Мужской шаблон для фотошопа - Байкер + Мужской шаблон для фото - бизнесмен	+ Справочник по JavaScript + Opera 10.01 + hollybook + Тренер для игры GTA San Andreas + PC Tools Firewall Plus 5.0.0.38 + Alcohol 120% 1.9.8.7612

Интересное

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

Добавлено: 11.02.2010 | Источник: http://vsebudetok.net

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

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

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

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)