Я часто наблюдаю в сети: загрузился сайт и при наведении на ссылку-картинку происходит загрузка новой картинки, которая выступает в качестве hover-эффекта ссылки.

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

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

Реализовать "правильный" эффект смены картинки, при наведении мышкой на ссылку, можно с помощью CSS.

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

Как говориться: Все гениальное просто.

1. Готовим картинку. Должно получится примерно так:
   

   Где первая (верхняя) часть - это картинка без наведения указателя, а вторая (нижняя) часть - картинка после наведения указателя мыши. Все просто. Самое главное в изготовлении сделать 2 абсолютно одинаковых изображения, а то при наведении изображение на картинке будет скакать.

2. Далее в CSS-файл вашего сайта нужно добавить:
   1. #rollover {
   2. background: url(/images/logo_fd.png);
   3. display: block;
   4. width: 80px;
   5. height: 74px;
   6. }
   7.  
   8. #rollover:hover {
   9. background-position: 0 -74px;
   10. }

3. В месте, где должно быть выведено изображение с эффектом, ставим:
   1. <div id="rollover"></div>

Статьи по теме:

• Фотомонтажим на PHP
• Спрайты: меньше картинок - больше скорость
• Графические фильтры на основе матрицы скручивания
• Градиент: CSS3 против CSS2 + картинка
• Открываем ссылку в новом окне, не используя атрибут target в коде страницы