mybiznesinfo.ru


/* 01.06.2005 */

CSS rollover

Автор: Petr Stanicek, "Fast Rollovers Without Preload" (08.07.2003)
Перевод: Цыгырлаш Игорь (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.

rollover background image
Рис. 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>
-> Обсудить статью в форуме
mybiznesinfo.ru
<- Назад к списку статей
•> Плавное открытие/закрытие окна (CSS свойство clip)
<• Скажи Javascript, нажат ли Caps Lock?