Ефект зміни картинки, при наведення мишкою на посилання c допомогою - css

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

Я часто спостерігаю в мережі: завантажився сайт і при наведенні на посилання-картинку відбувається завантаження нової картинки, яка виступає в якості hover-ефекту посилання.

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

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

Алгоритм дії цього прийому CSS буде полягати в тому, що картинка, яка використовується для посилання, буде завантажуватися відразу цілком, але показуватися буде тільки частина. При наведенні відбувається її зсув і показується інша частина.

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

Готуємо картинку. Має вийти приблизно так:

Де перша (верхня) частина - це картинка без наведення покажчика, а друга (нижня) частина - картинка після наведення покажчика миші. Все просто. Найголовніше в виготовленні зробити 2 абсолютно однакових зображення, а то при наведенні зображення на зображенні буде скакати.

Далі в CSS-файл вашого сайту потрібно додати:

#rollover background: url (/images/logo_fd.png);
display: block;
width: 80px;
height: 74px;
>

#rollover: hover background-position: 0 -74px;
>

У місці, де має бути виведено зображення з ефектом, ставимо:

В результаті всього цього діяння ми отримаємо ось такий результат:

Останнім часом став замислюватися про покупку квартири. Замислюватися - це ж не купувати. Дак от. Купити нерухомість в Новосибірську можна порівняти з придбанням квартири в Чехії. А Чехія - це Євросоюз, а Новосибірськ - це Росія. Робіть висновки.