Эффект смены картинки, при наведения мышкой на ссылку c помощью CSS. Статьи. wb0.ru - Все для веб-мастера, on-line сервисы

Эффект смены картинки, при наведения мышкой на ссылку c помощью CSS

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

Я часто наблюдаю в сети: загрузился сайт и при наведении на ссылку-картинку происходит загрузка новой картинки, которая выступает в качестве 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>
В результате всего этого деяния мы получим вот такой результат:


Дата публикации: 07.07.2010
adminway.ru

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


Комментарии:
  1. Гость: спасибо, очень ценно!
    Добавлен: 2010-07-07

  2. Гость: Спасибо!!
    Добавлен: 2011-11-06

  3. newwood: спасибо за подробный пример,но как насчет отображения в старых версиях ИЕ
    Добавлен: 2012-02-10

  4. Admin: К сожалению, никак. Только с 7-й.
    Добавлен: 2012-02-10

  5. pvp: гениально ))
    Добавлен: 2012-07-04

  6. IIaBeJI: На кой черт вам сдался ИЕ, ну никто жеж не пользуется им
    Добавлен: 2012-11-12

  7. IIaBeJI: \А статья отличная, очень доступно и просто, рекомендую
    Добавлен: 2012-11-12

  8. виталий: сделал как написанно, но что то не выходит? посмотрел файл css так вообще не нашёл идентификатора
    Добавлен: 2015-07-24

  9. Admin: виталий, в CSS строки 1 и 8.
    Добавлен: 2015-07-24

  10. Peter Winter: 555-555-0199@example.com
    Добавлен: 2017-10-27


   Ваш псевдоним:
Ваш комментарий:

Новости Интернет


Поиск




Наши партнеры




Последний пересчет

тИЦ:07 Окт 15
PR:09 Дек 13

Посетители

On-Line:14
Рекорд:1794
Зафиксирован:01 Окт 13

Наши партнеры

wservices.ru - регистрация доменов, Whois-сервисы Смайлы на все случаи жизни


Календарь событий


 
Copyright © 2006-2017, wb0.ru