Многие вебмастеры в погоне за красивостью и эффектностью (не путать с эффективностью) начинают внедрять эффекты, которые зачастую раздражают пользователей сайта.
Я часто наблюдаю в сети: загрузился сайт и при наведении на ссылку-картинку происходит загрузка новой картинки, которая выступает в качестве hover-эффекта ссылки.
Идея отличная, т.к. любая ссылка должна откликаться на наведение мыши, но реализация просто ужасная. Кстати, такую картину я наблюдал на сайте Сбербанк, сейчас возможно это уже убрали, не знаю.
Такое поведение ссылки-картинки выглядит очень неуважительно к пользователю. Сбербанк еще может себе позволить это, т.к. суточная посещаемость там зашкаливает, но начинающему сайту это не простительно.
Реализовать "правильный" эффект смены картинки, при наведении мышкой на ссылку, можно с помощью CSS.
Алгоритм действия этого приема CSS будет заключаться в том, что картинка, используемая для ссылки, будет загружаться сразу целиком, но показываться будет только часть. При наведении происходит ее смещение и показывается другая часть.
Как говориться: Все гениальное просто.
- Готовим картинку. Должно получится примерно так:
Где первая (верхняя) часть - это картинка без наведения указателя, а вторая (нижняя) часть - картинка после наведения указателя мыши. Все просто. Самое главное в изготовлении сделать 2 абсолютно одинаковых изображения, а то при наведении изображение на картинке будет скакать.
- Далее в CSS-файл вашего сайта нужно добавить:
#rollover {
background: url(/images/logo_fd.png);
display: block;
width: 80px;
height: 74px;
}
#rollover:hover {
background-position: 0 -74px;
} - В месте, где должно быть выведено изображение с эффектом, ставим:
В результате всего этого деяния мы получим вот такой результат:
В последнее время стал задумываться о покупке квартиры. Задумываться - это же не покупать. Дак вот. Купить недвижимость в Новосибирске сравнимо с приобретением квартиры в Чехии. А Чехия - это Евросоюз, а Новосибирск - это Россия. Делайте выводы.
CSS рулит