Каков предпочтительный способ выполнения CSS-ролловера?

CSS подходит для ролловеров. Они реализуются в основном с помощью псевдоселектора :hover. Вот очень простая реализация:

a{
    background-image: url(non-hovered-state.png);
}
a:hover{
    background-image: url(hovered-state.png);
}

Однако есть несколько вещей, о которых вам нужно знать:

• IE6 поддерживает только :hover на <a> тегах
• изображения, указанные в CSS, но не используемые на странице, не будут загружены сразу (это означает, что состояние ролловера может занять секунду, чтобы появиться в первый раз)

Ограничение <a>-tags-only обычно не является проблемой, так как вы, как правило, хотите, чтобы ролловеры были кликабельными. Последнее, однако, является немного более сложной проблемой. Существует метод под названием CSS Sprites , который может предотвратить эту проблему, вы можете найти пример метода, используемого для выполнения без предварительной загрузки ролловеров.

Это довольно просто, основной принцип заключается в том, что вы создаете изображение больше, чем элемент, устанавливаете изображение в качестве фонового изображения и размещаете его с помощью background-position, так что виден только тот бит, который вы хотите. Это значит, что показать завис состояние, вам просто нужно изменить положение фона - никаких дополнительных файлов не нужно загружать вообще. Вот быстрый и грязный пример (в этом примере предполагается, что у вас есть элемент высотой 20 пикселей и фоновое изображение, содержащее как зависшие, так и не зависшие состояния-одно поверх другого (таким образом, изображение высотой 40 пикселей)):

a{
    background-image: url(rollover-sprites.png);
    background-position: 0 0; /* Added for clarity */
    height: 20px;
}
a:hover{
    background-position: 0 -20px; /* move the image up 20px to show the hovered state below */
}

Обратите внимание, что использование этой техники "спрайтов" означает, что вы не сможете использовать Альфа-прозрачные PNGs с IE6 (поскольку единственный способ IE6 должен отображать Альфа-прозрачные PNGs правильно использует специальный фильтр изображений, который не поддерживает background-position)