1. CSS rollover.

Простой rollover-эффект  Обычно таким термином называют смену графической картинки при наведении на нее мышки, своеобразный call-to-action. . Элементы меню это ссылки заданные тэгом а со стилем display:block. Для получения rollover-эффекта задаются стили фонового изображения для селекторов a, a:hover и a:active. Так же для упрощения реализации rollover-эффекта используется только одно изображение содержащее все состояния – normal, :hover, and :active.
Использование же одной общей картинки делает ненужным смену фонового изображения. Мы просто должны изменить свойство background-position смещая фоновое изобращение. Нормальное состояние использует не сдвинутое фоновое изображение, состояние :hover использует фоновое изображение сдвинутое на определенное число пикселей (в нашем примере сдвиг 157px влево), состояние :active использует большее смещение (314px в примере).
Вот и все. Только одна картинка. Нет необходимости в предварительной загрузке. Состояния меняются максимально быстро (смещение фонового изображения происходим намного быстрее чем замена фонового рисунка)

CSS————————————————————
ul, li {margin:0;padding:0;}
ul#menu li {list-style:none;}
ul#menu li a {
display:block; /* Делаем ссылки блочным элементом, чтобы они могли нативно работать с внутренними полями */
width:120px;
background: url(rollover.gif) 0 0 no-repeat;
margin: 1em 0;
padding:7px 0 10px 20px;
font: bold 14px/1 sans-serif;
color:#c60;
text-decoration: none;
}
ul#menu li a:hover {
background-position: -157px 0;
color: #E9BE75;
}
ul#menu li a:active {
background-position: -314px 0;
color:white;
}

XHTML————————————————————
<ul id=»menu»>
<li><a href=»#» title=»Новости»>Новости</a></li>
<li><a href=»#» title=»Новости»>Новости</a></li>
<li><a href=»#» title=»Новости»>Новости</a></li>
<li><a href=»#» title=»Новости»>Новости</a></li>
</ul>

В IE может мерцать при наведении мыши. Решение данной проблемы довольно простое: фоновое изображение (смещаемое к «hover» позиции) привязывается к внешнему элементу, и тоже изображение используется и для вложенного элемента <a>(как есть без смещения). При этом :hover состояние должно просто менять фон тэга <a> на прозрачный, тем самым «освобождая» фон внешнего элемента. Таким образом, изображение сменяется, а у IE нет повода мерцать.

2. CSS rollover.

CSS————————————————————
body, ul, li, a {padding:0; margin:0;}

ul#menu {
height: 25px;
float:left; /*предотвращаем схлопывание контейнера, при этом ширина=ширине контента(всех кнопок). Аналог этого – overflow:hidden; – ширина на все окно*/
margin:30px 0 0 30px;
border-bottom: 1px solid black;
}
ul#menu li {
width:120px;
height: 25px;
float:left;
list-style:none;
margin-right:5px;
background:url(rollover2.gif) left top no-repeat; /* белая кнопка по умолчанию*/
}
ul#menu li.last {margin-right:0;}
ul#menu li a {
text-decoration:none;
text-align:center;
line-height:25px;
display: block;
}
ul#menu li a:hover {
background:url(rollover2.gif) left bottom no-repeat; /* при наведении мышкой у тэга <a> появляется фон – синий*/
}
XHTML————————————————————
<ul id=»menu»>
<li><a href=»#» title=»Новости»>Новости</a></li>
<li><a href=»#» title=»Новости»>Новости</a></li>
<li><a href=»#» title=»Новости»>Новости</a></li>
<li class=»last»><a href=»#» title=»Новости»>Новости</a></li>
</ul>

Еще аналог:

3. CSS Image map

Я намеренно выделил этот пункт, ибо в предыдущем все области были одинаковыми, а в данном разделе размер областей может быть, вообще говоря, произвольным. Одним из хинтов является совмещение разных областей, чтобы они занимали минимум места. Эта техника как раз и заменила классический Image Map.

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

Набор иконок. Основной опасностью таких файлов является «наложение» фоновых картинок одного блока на фон другого. Лучше всего это видно при увеличении размера шрифта: блок становится выше или длиннее, и запаса полей данного изображения уже не хватает, в результате у одного элемента отображается сразу несколько иконок. Непорядок. Как с ним бороться, я расскажу ниже в общих советах по созданию ресурсных картинок для CSS sprites. В этом случае авторы поступают наиболее мудро: они жестко ограничивают размеры контейнера, у которого заданы определенные фоновые картинки, поэтому даже при увеличенном тексте картинка не «ломается» (однако, текст становится нечитаемым).

Сама картинка:

XHTML———————————————————–

<div id=»sprites»>
<a id=»top-left» href=»#top-left»></a>
<a id=»top-right» href=»#top-right»></a>
<a id=»bottom-left» href=»#bottom-left»></a>
<a id=»bottom-right» href=»#bottom-right»></a>
<br style=»clear: left; height: 0px; font-size: 0px;» />
</div>

CSS———————————————————–

div#sprites{ width: 260px; }

div#sprites a
{
float: left;
width: 130px;
height: 105px;
display: block;
}

a#top-left { background: url(‘apple_sprite.jpg’) 0px 0px no-repeat; }
a#top-left:hover { background: url(‘apple_sprite.jpg’) 0px -210px no-repeat;    }
a#top-left:visited { background: url(‘apple_sprite.jpg’) 0px -210px no-repeat;    }
a#top-right {    background: url(‘apple_sprite.jpg’) -130px 0px no-repeat; }
a#top-right:hover    {    background: url(‘apple_sprite.jpg’) -130px -210px no-repeat;    }
a#top-right:visited    {    background: url(‘apple_sprite.jpg’) -130px -210px no-repeat;    }
a#bottom-left    {    background: url(‘apple_sprite.jpg’) 0px -105px no-repeat; }
a#bottom-left:hover    {    background: url(‘apple_sprite.jpg’) -0px -315px no-repeat;    }
a#bottom-left:visited    {    background: url(‘apple_sprite.jpg’) -0px -315px no-repeat;    }
a#bottom-right { background: url(‘apple_sprite.jpg’) -130px -105px no-repeat; }
a#bottom-right:hover { background: url(‘apple_sprite.jpg’) -130px -315px no-repeat; }
a#bottom-right:visited { background: url(‘apple_sprite.jpg’) -130px -315px no-repeat; }
CSS Sprites – CSS Спрайт это одна большая картинка, в которую включены множество других связанных изображений, использующихся на сайте. Думаю вы обращали внимание на элементы дизайна или навигации, при наведении на которые изображение меняется мгновенно, подсвечивая либо меняя графический элемент, создавая довольно приятный визуальный эффект, в том числе и эффект анимации. Скрипты как правило в этом случае не используются, меняется лишь положение фона в таблице стилей при наведении на данный элемент.