CSS-спрайты: MouseOver должен умереть!

ПТ, 11/06/2009 - 11:18 | Автор: Anton

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

Это как с чернильными ручками в советские времена - перевернул девушку, и она - оп-па - и уже голая. Приятно. Так бы переворачивал и переворачивал.

Примерно то же с картинками. Бывают картинки с такой подсветкой, что подводил бы мышкой и подводил. Пока рука не устанет.

Но, в отличие от чернильных ручек, картинки с подсветкой, которые делаются традиционным способом MouseOver, иногда подтормаживают. Подвел мышку - и ждешь несколько секунд в растерянности: загрузится картинка или нет? Ведь картинка с подсветкой грузится отдельно от основной картинки, и не факт, что она загрузится быстро. А может, она вообще не загрузится, потому что закешировалась криво.

Чернильные ручки были куда надежнее.

Но все это было верно, пока не появились CSS-спрайты.

Как перестать беспокоиться о MouseOver и начать жить

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

Элегантное решение, напоминающее лампочку накаливания. Она ведь не постоянно светит, а часто-часто моргает. Так часто, что мы не замечаем подставы и думаем, что свет равномерный.

В CSS-спрайтах картинка сдвигается так быстро, что нам кажется, что она подсветилась или заменилась на другую.

Не наебешь - не проживешь, это еще старик Эдисон понимал.

Таким образом, с помощью CSS спрайтов мы радикально избавляемся от главной проблемы - необходимости синхронно загрузить 2 картинки. Теперь мы грузим 1 картинку, содержащую 2 изображения, а вырученное время и деньги тратим на женщин и пиво.

Заменяем две картинки с MouseOver на одну с CSS спрайтами

CSS спрайтом называется файл картинки (.gif, .png, .jpg, ...), состоящий из нескольких частей изображения и сконфигурированный в CSS таким образом, чтобы показывать в браузере только одну часть. Изображения устанавливается как «background» для HTML-элемента и далее при помощи CSS-параметра «background-position» позиционируется в необходимом положении.

Преимущества CSS спрайтов:

нет задержек при реакции на hover;
меньшее количество запросов к веб-серверу;
меньший объем скачиваемых файлов.

Недостатки CSS спрайтов:

менее интуитивный для вебмастера способ использования картинок (нужно не только указать файл картинки, но и указать позицию отображаемого фрагмента картинки);
большие требования к памяти на веб-сервере (если CSS спрайт состоит из десятков картинок, то они будут все висеть в памяти вместе с пустыми местами между отображаемыми фрагментами);
правка картинок требует редактирования одного файла со всеми картинками, даже если нужно поправить только одну из них (хотя, возможно, это преимущество).

В следующем примере весь сайт верстается «спрайтами». Главное(!и основное на мой взгляд) преимущество этой CSS-технологии состоит в том, что все изображения загружаются сразу и не требуют дозагрузки.

Например:

Имеется элемент

<a href=”#” class=”zoom”></a>

на него в CSS прописан

a.zoom{display: block;background: url(img/zoom.gif) no-repeat center;height: 28px;width: 28px;}

При наведении курсора на иконку картинка должна изменится:

a.zoom:hover{display: block;background: url(img/zoom_on.gif) no-repeat center;}

В итоге вторая картинка zoom_on.gif не отобразится сразу, а начнет загружаться в броузер. Тоесть сначала при наведении курсора на лупу старая картинка исчезает и только через определенное время загрузится zoom_on.gif.

Вариант со спрайтами:

Вместо двух картинок делаем одну zoom.gif с необходимыми позициями поведения:

В наш элемент добавляем увеличить, чтобы тег небыл пустым(необходимо для валидации):

<a class="zoom" href="#">увеличить</a>

Меняем CSS:

/*скрываем текст*/ 
a.zoom span{display: none;} 
/*выставляем иконку*/ 
a.zoom{display: block;background: url(zoom.gif) no-repeat 0 0;height: 32px;width: 32px;}
/*меняем положение иконки при наведении курсора мыши*/ 
a.zoom:hover{background-position: -34px 0px;}

Аналогично «CSS-спрайтами» верстаем макет-заглушку на http://zina.com.ua/

Особенность макета в том, что все текстовые ссылки запланированы дизайнером картинками. При наведении мышой на текст-картинку — меняем ее спрайтом на такую же, но подчеркнутую.

В чистом HTML(без CSS) код будет выглядеть так:

<div class="allBox">
<ul>
<li class="link1"><a href="http://www.poly-pack.com.ua/" title="Компания Poly-Pack"><span>Компания Poly-Pack</span></a></li>
<li class="link2"><a href="http://www.lcsi.lg.ua/" title="Центр стоматологической имплантации ЛЦСИ"><span>Центр стоматологической имплантации ЛЦСИ</span></a></li>
<li class="link3"><a href="http://www.srkn.ru/" title="Oфициальный сайт писателя Владимира Сорокина"><span>Oфициальный сайт писателя Владимира Сорокина</span></a></li>
<li class="link4"><span>Сервис создания и поддержки интернет-магазинов </span><a href="http://www.shopsupport.ru/" title="Сервис создания и поддержки интернет-магазинов ShopSupport"><span>ShopSupport</span></a></li>
…
…
</ul>
</div>

Внутри тега <a> пропишем с текстом внутри — при отключенном CSS будет выводится простой HTML-список. скроем в CSS, <a> будет блоком с фиксированными размерами.

Вырезаем navigation.png — текст-картинка без фона с учетом спрайтов, — поведения «a» и «a:hover»

CSS-код:

 
/* скрываем span */ 
div.allBox ul li span{display: none;} 
/* выставляем иконку для всех элементов */ 
div.allBox ul li a{display: block;background: url(img/navigation.png) no-repeat 0 0;height: 28px;width: 500px;} 
/* выставляем для конкретного элемента &ldquo;a&rdquo; внутри &rdquo;li.link1&rdquo; */ 
div.allBox ul li.link1 a{background-position:  0px -15px;}
/* при наведении курсора меняем положение navigation.png */
div.allBox ul li.link1 a:hover{background-position: 0px -600px;} 
div.allBox ul li.link2 a{background-position:  0px -44px;height: 25px;}
div.allBox ul li.link2 a:hover{background-position:  0px -629px;}