/* 01.06.2005 */
CSS rollover
Перевод: Цыгырлаш Игорь (01.06.2005)
Rollover-эффекты обычно предполагают использование 2, 3 и более изображений (и зачастую эти изображения загружаются заранее для достижения лучших результатов). Для каждого из состояний Rollover-эффекта (normal, hover, active, visited, ...) имеется по одному отдельному изображению. Суть же метода, описываемого в данной статье, в размещениеи всех изображений для всех состояний в одной картинке, что делает динамическую смену изображения быстрее и не требует предварительной загрузки.
Начнем с рассмотрения простого меню:
Пример 1:
Элементы меню это ссылки заданные тэгом A с CSS-стилем display:block. F А собственно для получения Rollover-эффекта задаются стили фонового изображения для селекторов a, a:hover и a:active. Так же для упрощения реализации Rollover-эффекта используется только одно изображение содержащее все состояния - normal, :hover, and :active.
Рис. 1: Одна цельная картинка объединяющая три состояния
Обычно, CSS rollover эффекты используют фоновые изображения следующим образом:
#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");
}
Где каждому состоянию соответствует отдельный файл картинки.
Использование же одной общей картинки делает ненужным смену фонового изображения. Мы просто должны изменить свойство background-position смещая фоновое изобращение. Нормальное состояние использует не сдвинутое фоновое изображение. Состояние :hover использует фоновое изображение сдвинутое на определенное число пикселей (в нашем примере сдвиг 157px влево), состояние :active использует большее смещение (314px в примере).
#menu a {
background: url("button.gif") 0 0 no-repeat;
...
}
#menu a:hover {
background-position: -157px 0;
...
}
#menu a:active {
background-position: -314px 0;
...
}
Вот и все. Только одна картинка. Нет необходимости в предварительной загрузке. Состояния меняются максимально быстро (смещение фонового изображения происходим на много быстрее чем замена фонового рисунка). AFAIK, это способ работает во всех CSS-2 совместимых браузерах (IE5+, Mozilla, Opera, Safari, ...).
Полный исходный код примера 1 представлен ниже:
<style type="text/css">
#menu a {
display:block;
width:120px;
background: url("button.gif") 0 0 no-repeat;
margin: 1em 0;
padding:7px 0 10px 20px;
font: bold 14px/1 sans-serif;
color:#c60;
text-decoration: none;
}
#menu a:hover {
background-position: -157px 0;
color: #E9BE75;
}
#menu a:active {
background-position: -314px 0;
color:white;
}
</style>
<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>
Дополнение
Было замечено печальное поведение IE под Windows. Иногда происходит мерцание элемента при наведенной на него мыши из-за медленной загрузки фонового изображения (я такого эффекта не наблюдал - прим. переводчика).
Решение данной проблемы довольно простое: фоновое изображение (смещаемое к "hover" позиции) привязывается к внешнему элементу, и тоже изображение используется и для вложенного элемента A (тэг A)(как есть без смещения). При этом :hover состояние должно просто менять фон тэга A на прозрачный, тем самым "освобождая" фон внешнего элемента. Таким образом, изображение сменяется, а у IE нет повода мерцать.
Просмотрите исходный код "Примера 2" чтобы увидеть детали реализации. Данный способ работает во всех встречаемых мною браузерах за исключением MacIE.
Пример 2:
Полная картинка:
Исходный код:
<style type="text/css">
#menu2 {
height: 25px;
margin: 3em 0; padding:0 1em;
border-bottom: 1px solid black;
}
div.outer {
float: left;
width: 120px; height: 25px;
margin: 0 3px 0 0;
background: url( 'bars.gif' ) 0 -50px no-repeat;
}
div.outer a {
display: block;
margin: 0; padding:0;
width:100%; height:100%;
overflow:hidden;
font: bold 13px/1 Georgia, serif;
color:#039;
text-decoration: none;
background: url( 'bars.gif' ) top left no-repeat;
}
div.outer span {
display: block;
margin:0; padding: 7px 0 0 13px;
}
div.outer a:hover {
background-image: none;
color: yellow;
}
div.outer a:active {
color: black;
}
</style>
<div id="menu2">
<div class="outer"><a href="#"><span>First</span></a></div>
<div class="outer"><a href="#"><span>Second</span></a></div>
<div class="outer"><a href="#"><span>Third</span></a></div>
</div>