Xpoint
   [напомнить пароль]

Решение проблемы с загрузкой фоновой картинки hover

Оглавление

Прелюдия

В своей практике все не раз сталкивались со ссылками, которые меняют свой вид по наведению мыши.

Когда-то давным-давно, когда стандартов не существовало, а Интернет был совсем "дикий", мы использовали для этой цели JavaScript.
Выглядело это приблизительно так:

<a href="#" onmouseover="document.images.myimage.src='image1_over.gif'" onmouseout="document.images.myimage.src='image1.gif'">
  <img name="myimage" src="image1.gif" width="128" height="16" border="0">
</a>

И это еще не самый худший вариант, который можно было увидеть. Проблема с предзагрузкой картинок решалась путем созданием объектов Image, которые не отображаются в контенте страницы:

var image1 = new Image();
image1.src = 'image1_over.gif';

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

<ul id="mainmenu">
  <li class="about"><a href="#"><span>About</span></a></li>
  <li class="products"><a href="#"><span>Products</span></a></li>
  <li class="contacts"><a href="#"><span>Contacts</span></a></li>
</ul>

Фантазия, как может быть представлен такой список практически не ограничена ничем. Примеры оформления можно посмотреть по адресу: http://css.maxdesign.com.au/listamatic/

Пример

CSS, для примера, может быть таким:

/* Спрячем весь текст */
#mainmenu a span {
   display: none;
}
/* Сделаем ссылки блоковыми, установим размеры */
#mainmenu a {
   width: 100px;
   height: 20px;
   display: block;
}
/* Зададим фоновую картинку по умолчанию */
#mainmenu .about a {
   background: url(images/about.gif) no-repeat;
}
/* Зададим картинку, которая показывается при наведении мыши */
#mainmenu .about a:hover {
   background: url(images/about_over.gif) no-repeat;
}
/* ... и т.д. для остальных картинок */

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

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

Решение

Использовать сдвиг видимой части картинки с помощью background-position. Изменим CSS следующим образом:

/* Зададим фоновую картинку по умолчанию */
#mainmenu .about a {
   background: url(images/about.gif) 0 0 no-repeat;
}
/* Зададим картинку, которая показывается при наведении мыши */
#mainmenu .about a:hover {
   background-position: 0 -20px;
}
/* ... и т.д. для остальных картинок */

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

Ссылки

http://wellstyled.com/css-nopreload-rollovers.html

Powered by POEM™ Engine Copyright © 2002-2005