Техника CSS Sprites

Рассмотрев все аспекты объединения текстовых файлов, перейдем к графической и мультимедийной информации. Сейчас уже много где написано и упомянуто про технику CSS Sprites (или CSS Image Maps). Ниже приведены несколько примеров и полезных ссылок. И пара советов, где и как этот метод может быть применим наиболее оптимальным образом.

Сама техника заключается в том, что мы создаем комбинированное изображение, из которого затем «вырезаем» с помощью CSS‑свойства background‑position нужный нам в данном случае кусок. На текущем уровне поддержки браузерами (порядка 99,9%) она является просто обязательной для любого уважающего себя веб‑ресурса, так как позволяет сократить число запросов к серверу – а кроме этого отделить поведение от представления, и возложить труд по анимации на CSS‑движок браузера, а не на JavaScript‑движок (т. е. это будет работать даже с выключенными скриптами), и много‑много прочих «вкусностей». Но обо всем по порядку.

Простой rollover‑эффект

Обычно таким термином называют смену графической картинки при наведении на нее мыши – своеобразный призыв к действию (как его любят называть маркетологи). У веб‑мастеров сложилась дурная практика делать такие эффекты через onmouseover/onmouseout на картинках.

Это прямое нарушения принципа разделение представления от поведения и несемантическая (в лучшем случае, в худшем – еще и невалидная) верстка. И вообще, это очень плохо. В данном случае это делается средствами CSS и является семантически правильным (в большинстве HTML‑документов – это ссылка, но с элементами форм приходится немного повозиться, однако тоже ничего сверхъестественного).

Пример: при наведении просто показывается другая картинка.

Рис. 4.1 . Пример фонового изображения для простого rollover‑эффекта. Источник: www.websiteoptimization.com

Соответствующая часть в CSS‑коде будет выглядеть примерно так:

a.sprited {

background: yellow url(http://site.ru/img/button.png) 0 0 no‑repeat;

width: 100px;

height: 20px;

}

a.sprited:hover {

background‑position: ‑100px 0;

background‑color: red;

}

При наведении на ссылку фоновое изображение под ней «уедет», и покажется правая его часть (ибо она изначально скрыта жесткими размерами самой кнопки). Дополнительно мы обеспечили обратную совместимость для тех пользователей, у которых отключены картинки. Для них мы меняем цвет фона при наведении (если картинки в браузере включены, то изображение покажется поверх цвета).

Сложный rollover‑эффект

Под таким термином стоит понимать те случаи, когда в одном файле содержится несколько «динамических кнопок». Например, это может быть такое изображение:

Рис. 4.2 . Пример фонового изображения для сложного rollover‑эффекта. Источник: www.spegele.com