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

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

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

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

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

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

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

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

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

  1. Готовим картинку. Должно получится примерно так:
    Эффект смены картинки, при наведения мышкой на ссылку c помощью CSS

    Где первая (верхняя) часть – это картинка без наведения указателя, а вторая (нижняя) часть – картинка после наведения указателя мыши. Все просто. Самое главное в изготовлении сделать 2 абсолютно одинаковых изображения, а то при наведении изображение на картинке будет скакать.
  2. Далее в CSS-файл вашего сайта нужно добавить:
    #rollover {
      background: url(/images/logo_fd.png);
      display: block;
      width: 80px;
      height: 74px;
    }
    #rollover:hover {
      background-position: 0 -74px;
    }
  3. В месте, где должно быть выведено изображение с эффектом, ставим:
    <div id="rollover"></div>

В результате всего этого деяния мы получим вот такой результат:

Теги:

Комментарии

Win, 30.07.2010 08:15 #

CSS рулит

Alex666®, 09.12.2010 21:14 #

Вот дополненный код с кнопками для менюшки…
http://armdgroup-tdu2.ucoz.ru/Bce_Dlya_menu/menu_click.html

Mut@NT, 10.12.2010 22:27 #

Alex666®: Вот дополненный код с кнопками для менюшки…
http://armdgroup-tdu2.ucoz.ru/Bce_Dlya_menu/menu_click.html

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

bryn, 07.01.2011 19:23 #

подскажите пожалуйста, а как сделать чтобы такая меняющаяся картинка работала как ссылка?

Mut@NT, 13.01.2011 21:06 #

Делаем так:
<a href=“http://adminway.ru”><div id=“rollover”></div></a>

Александр, 08.02.2011 23:36 #

Спасибо брат! сутки мучился что бы именно на ЦСС замутить))

Александр, 17.02.2011 10:14 #

Простите, вопрос совсем от чайника:
“Далее в CSS-файл вашего сайта нужно добавить”…
Это куда? (с HTML уже подружился)…

Mut@NT, 17.02.2011 10:39 #

Если Вы используете отдельный файл CSS, то в него.
Если его нет, то прямо в HTML-файле, в любом месте нужно добавить:
<style type=“text/css”>

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

#rollover:hover {
background-position: 0 -74px;
}
</style>

Александр, 17.02.2011 12:39 #

Да, уж…
Простите, если я тут поспрашиваю со своего уровня!))) Думал, что все уже понял и… ничего не получается.
Буду благодарен за “показ пальцем” без мудростей для “бывалых”:
вот первая картинка – http://www.visionshop.su/images/stories/r2-2.jpg
вот вторая, которая появляется при “мышании” – http://www.visionshop.su/images/stories/r3-2.jpg…
Через FTP не нашел файл CSS
Что нужно вставить в HTML страницы? Пожалуйста, подскажите!

Mut@NT, 17.02.2011 16:08 #

Пройдитесь по статье, прямо по пунктам. первонапево нужно картинку подготовить, а потом уже вставляйте код, который я привел, а после код для вывода изображения

Юрий, 24.02.2011 18:22 #

Я конечно дико извиняюсь и ничего не критикую, Но сделав все как выше написано, а именно:
__________________________________________________
<style type=“text/css”>

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

#rollover:hover {
background-position: 0 -74px;
}
</style>

И добавив в контент

<a href=“Ваша ссылка”><div id=“rulesover”></div></a>
_________________________________________________________

Получилось ровно 0.

Долго я смотрел и не мог понять логической цепочки, откуда же берется вторая картинка в этом коде.

В результате задолбался и решил подправить код, что бы все встало на свои места!

Если Вам требуется сделать смену картинки без особых заморочек, то это Вам:

_________________________________________________________

Рисуем 2 картинки. Сохраняем в одну папочку имена к примеру: test.png и test-on.png (Назвать каждый индивидуально хоть ежиками можете, главное не забудьте!)

CSS код:

#rulesover {
background: url(‘images/test.png’);
display: block;
width: 168px;
height: 44px;
}

#rulesover:hover {
background-position: 0 -44px;
background: url(‘images/test-on.png’);
}

Далее идем в сам шаблон и в нем где хотим вывести картинку вставляем:

<a href=“Ваша ссылка”><div id=“rulesover”></div></a>
Без ссылки : <div id=“rulesover”></div>

Все далее зависит только от знания кода и фантазии. поставив первой скажем jpg картинку вам ничто не мешает вторую сделать gif анимированную и в результате при наведении будет ваша анимация.

Удачи всем, кто нашел себя здесь!)

Mut@NT, 24.02.2011 18:28 #

Картинка должна быть одна. В результате работы при наведении на картинку происходит ее сдвиг.
Ваш пример показывает как не нужно делать картинки-ссылки. В вашем случае, вторая картинка будет подгружаться только после наведения.

Юрий, 24.02.2011 19:34 #

Да по большому счету, мне все равно будет она подгружаться при наведении или нет. Главное результат.
Прочитать тут код и подумать это одно другое дело практика.
По первоначальному коду я наконец таки понял как происходит у тебя смещение. Путем простого сдвига на пиксели. .т.е. картинка одна, но сделать ее и сохранить ровно на сдвиг, тем более если ты ее штрихуешь и подгоняешь в процессе сложно и в Этом есть большой недостаток! у тебя Картинка одна! сделать красивую анимацию не получиться это просто примитивно и все. в случае с двумя картинками есть поле для творчества.
Я ничего не доказываю, а показываю как сделать надо для того, что бы люди могли воплощать с ЭТИМ кодом гораздо больше чем простой сдвиг.
Всем только польза будет.

P.S. Кстати Если Вы так уж привязалась к подгрузке картинки во время загрузки сайта что бы убрать на нет неказистость отображения при малой скорости интернета, то сделайте тупо и просто скрипт на ПРЕДКЕШ всех вообще картинок каких хотите и вставьте его в шапку сайта будет Вам радость))

Mut@NT, 24.02.2011 20:44 #

Если нужно поле для творчества то jQuery Вам в помощь. ;)
Приведенный выше способ – это всего-лишь пример того, как можно сделать простой эффект смены картинки, который одинакого хорошо будет работать как на быстром интернете, так и на медленном. К тому же не будет проблем с мобильными устройствами.

Понятно, что можно сделать скрипт, который будет кэшировать все картинки, но это своеобразный “костыль”, который решает проблему добавлением ненужного звена.

Без обид.

Алексей, 28.02.2011 23:16 #

Мужик, молодец. Я обычно комментарии не пишу, но тут решил поблагодарить. Преподнес отлично! Спасибо!

skfo, 07.06.2011 15:52 #

спасибо, красиво получилось

Алекс, 14.06.2011 14:29 #

В девятом эксплорере не работает. Грусть…

Зюзгин Иван, 20.06.2011 06:01 #

Я думал они свои потуги на 8 остановят. Ан нет…
Странно, что не работает

Влад, 29.08.2011 16:02 #

Спасибо, Автор.
Кстати, в IE такую фичу вообще не реализовать?

SKL, 09.10.2012 10:52 #

Влад: Спасибо, Автор. Кстати, в IE такую фичу вообще не реализовать?

у меня получилось так:
вместо
#rollover:hover {
background-position: 0 -74px;
}

поставил
a:hover #rollover {
background-position: 0 -74px;
}
изаработало во всех браузерах

Antigen, 12.04.2013 17:15 #

#compilation2 {
background: url(../images/compilation2.jpg);
display: block;
width: 250px;
height: 250px;
}

#compilation2:hover {
background-position: 0 -250px;
}

картинка 1, 250х500 но получается сдвиг всего на 50% странно как-то…

Максим, 15.11.2013 16:46 #

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






Важное событие
Основание Canon<
Основание Canon
Узнать подробнее
Комментарии
Интересное