Новое
Новое для uCoz	Новое на форуме
+ Скрипт анонимного чата (ajax) + The Room Two + Wild Blood + Botanicula / Ботаникула + Король Математики (2013) + Кнопка рейтинга + и -	+ отбросы смотреть онлайн + Marlinnkalmes + проститутки иркутска + споры страховыми компаниями + купить водку ельцин - Белая Церковь-Полтава-Харьков + FedorTuh
Новое для Photoshop	Новые Программы
+ Календарь на 2016 год - Прикольная обезьянка с фруктом + Фото шаблон - В синем платье у Порше 918 + Шаблон для фото - Интервью актера + PSD шаблон для мужчин - Магнат у себя дома + Photoshop шаблон - В гламурной шляпе с цветами + Фотошаблон для фото - С новым годом от снегурки	+ Выбор достойного сервера + Полный курс изучения английского языка по методу Пимслера I-II-III (90 уроков+21 для чтения) + Aston2 + Имена, Гороскопы и Судьбы + Что предполагают партнерские программы + Get-Styles 2.0

Интересное

Скачать Делаем ролловер с помощью 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)