Как сделать смену картинки при наведении css

Смена картинки при наведении, ролловер-эффект с помощью CSS

Плагины и Шаблоны для WordPress

Доброго времени суток!
Иногда при создании сайта необходимо организовать ссылку(блок), где при наведении курсором — одно изображение сменяет второе. Чаще всего это осуществляют следующим образом — в CSS для блока прописывают фоном одну картинку, а потом задают свойству hover — другую картинку. Выглядит это следующим образом:
html код самой ссылки(блока с картинкой)

и стили CSS для нее

no image

Такой способ встречается очень часто, но у него есть маленький недостаток. Когда страница загружается, то грузится одна картинка, а когда вы наводите курсором на ссылку(блок) начинает грузится следующая картинка и чем больше ее размер, тем дольше это происходит. Выглядит это примерно так, после наведения картинка исчезает, а через секунду появляется новая. Потом это происходит мгновенно, но первый раз , небольшая задержка. Многим это не нравится, даже раздражает 🙂
Поэтому предлагаю способ №2.
Его идея заключается в использовании одной картинки, вместо двух. Мы просто показываем только одну часть картинки, а после наведения вторую. Называют данный способ — ролловер(rollover) и он имеет свои преимущества:

  • Одна картинка грузится быстрее, чем две (один запрос к серверу, а не два)
  • Одна картинка обычно меньше весит, чем две.
  • Ничего не нужно подгружать: всё грузится сразу.
  • Не забивается кеш браузера

В стилях css это выглядит так:

Плагины и Шаблоны для WordPress

В стилях видно, что наша ссылка(блок) имеет размер 100 на 100 пикселей. В то время картинка имеет размер 200 на 100 пикселей. По умолчанию css прижимает картинку к верхнему левому углу, поэтому в свойстве :hover мы задаем позицию и сдвигаем нашу картинку на 100 пикселей, тем самым показывая ее вторую часть. Результат — смена без задержки.

На этом все. Спасибо за внимание 🙂

Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты 🙂

Смена картинки при наведении курсора css

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

Большое спасибо за вашу помощь и внимательность к нам!

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

Скрипт по смене картинки при наведении курсора, будет реализован на css и html, совершено простым образом, без всяких применений javascript. Для этого нам нужно, две картинки как Вы уже поняли, одна активная, а другая пассивная. При наведении на картинку, она меняется на другую, принцип действий очень прост и понятен.

Далее нам потребуются два файла index.php и style.php.

Первая часть. HTML.

В нем мы просто прописываем ссылочку с классом images.

Вторая часть. CSS.

В классе a.images, прописываем путь к пассивной картинке, указываем ее как блочный элемент, устанавливаем ширину и высоту картинки. В классе a.images:hover мы только прописываем путь к активной картинке.

Вывод:

Думаю данный урок даст широкий спектр возможностей и применений, ведь данная технология по применению смены картинки при наведении курсора очень проста в реализации. Плюсы: скрипт простой и использует только css и html. Минусы: любая картинка имеет свой вес, а также ее нужно будет создавать в графической программе. Большое спасибо Вам за внимание и проявленный интерес к данному уроку!

В предыдущем уроке показывалось, как увеличивать картинку при наведении курсора мышки.
Для того что бы при наведении курсора мышки происходила смена картинки нужно, помимо размеров, дописать путь к новой картинке в onmouseover="" и путь к изначальной картинке в onmouseout=""

Для примера возьмём такую картинку, как начальную:

И такую для смены при наведении:

Теперь напишем код, в котором реализуем всё выше описанное.

Самый простой вариант

Второй вариант, когда при наведении на картинку, она меняется

Третий вариант


55 комментариев:

Morskaia Супер вещь:) Евгений Объясните, куда нужно вставлять те коды, которые вы приводите
Крутая вещь. NMitra Потренируйтесь сначала в теле сообщения (при написании/редактировании сообщения) на вкладке "HTML". В дальнейшем, если какой-либо вариант планируете распространить на все страницы, то стили CSS – код между

без тега style можно внести согласно этой статье http://shpargalkablog.ru/2011/12/kak-izmenit-shablon-blogger.html WeB XaSeR Оригинальны 3 и 5 варианты, прикольно.. А с кроссбраузерностью как? NMitra IE пока не поддерживает, в следующей версии (-ms-). NMitra Смена картинки будет происходить, только без эффектов. Ellis_Wood Это что-то новенькое!! класно=) Ольга У. Просто супер! Черников Александр Спасибо! admin У вас в примере две фотки, попробовал добавить 3 фотку, а показывает все равно две. NMitra Всё верно. Одна картинка становится прозрачной, поэтому становится видна нижняя. Я не ставила перед собой цели сделать фотогалерею. Посмотрите здесь http://www.cssplay.co.uk/menu/click-gallery-previous-next.html, http://www.cssplay.co.uk/menu/cssplay-any-size-gallery.html . А стили можно добавить любые. Анонимный Спасибо! Все получилось! NMitra Рада слышать. Ольга Корчёмкина Красота! Спасибо большое за идею! Буду использовать при необходимости. Оксана Все это очень интересно! Но у меня почему-то не получилось. Что я делаю не так? Вроде все просто. NMitra Подробнее: страница где пробуете, какие картинки, что хотите добиться? NMitra Мне нужно наглядно увидеть что вы делаете. Ольга Спасибо за подробное описание, только не понятно, куда нужно этот скрипт вставить? Если на страницу с картинкой, то ничего не получается. NMitra При написании статьи, вкладка "HTML". Добавьте код, напишите в комментариях страницу, где внесли изменения. Только тогда я смогу понять почему не получается. Марина Подскажите, пожалуйста, что делать для того, чтобы поверх меняющейся картинки получилось разместить "неменяющуюся"? Придумала такой дизайн – а вот теперь релизовать не получается. Помогите, пожалуйста! NMitra Одной из картинок прописать псевдоэлементы с content: url(); – http://shpargalkablog.ru/2012/02/before-after-css.html Анонимный Помогите пожалуйста,решил вставить картинки первым способом, вставил 1 картинку с пареходом на вторую.

Захотел на той же странице еще вставить картинки, вставил другие совсем картинки НО ПОКАЗЫВАЮТ ДВЕ ПЕРВЫХ хотя в коде ссылки на другие картинки.

Как это исправить?

Александр, ICQ:387818339 NMitra Заменить

Подробнее http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html Асиля Крутоо:))) NMitra Согласна))) Ефименко Владислав Я новенький в этом деле) Не могли бы вы подсказать почему картинки не меняются плавно, как у вас? NMitra Мне нужно увидеть что вы для этого сделали. Покажите страницу. Lina А у меня получаются 2 картинки рядом, или одна и не меняется. Lina А в первом примере вообще ничего не появляется. NMitra Покажите страницу с вашими экспериментами. Lina http://karen.arte-madeira.com.pt/# NMitra Вы стили CSS не прописываете. Не знаю вашу платформу, но, как правило, есть переключатель на HTML версию статьи. Код следует добавить именно там. Анонимный Подскажите, пожалуйста, а можно сделать так, чтобы при наведении картинка увеличивалась и сменилась на другую в этот момент как на сайте мегафона внизу? NMitra На скорую руку http://shpargalkablog.ru/2013/06/css.html
Если не нужна тень у картинок, то есть получиться ещё проще Анонимный агроменское спасибо Анонимный Спасибо. всё работает)) Sineoka Огромное спасибо. Так долго искала код, и только ваш заработал)) NMitra Рада, что всё удалось ) jeka Ели на одной странице несколько изображений с разными эффектами переходов, то все работают с эффектом последней картинки – почему, и как это исправить?
Заранее спамибо! NMitra для каждого эффекта свой

и следовательно
.izo1 img.raz <
-moz-transform:scale(0);
-webkit-transform:scale(0);
-o-transform:scale(0);
-ms-transform:scale(0);
> jeka Дело в том, что я чайник в CSS, не получается разобраться в Вашем ответе. Покажите пожалуйста на примере, буду премного благодарен. Хотел для примера загрузить то, что у меня &#8211; не получается. Какой то недопустимый тег.
Где что на что менять ума не приложу.
Спасибо что помогаете таким как я! jeka Простите за назойливость.
Сделал так: > где 1;2;3 для разных эффектов
Соответственно в css там где demo то же проставил для разных эффектов 1;2;3
Все работает. NMitra С селекторами лучше разбираться на http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Наоборот, хорошо, что отписались! Kate Donskaya Здравствуйте, я новичок совсем)
подскажите пожалуйста,можно ли делать эффект перекатывания не с картинкой, а с текстом, и как?
Заранее спасибо большое!!)) Kate Donskaya И еще вопрос: по этому уроку с картинками все получилось, но как мне сделать эту картинку ссылкой на страницу? дело в том, что когда я вставляю адрес ссылки после значения href="#", она работает, но некорректно: открывается указанная в ссылке страница прямо в поле с кодом! (с полями прокрутки по бокам)(((. NMitra Здравствуйте, измените html

Dmitry Khramov Super! NMitra Благодарю ) Serge Pol а плгины для ВП эсть такие??
NMitra Мне это не известно, предпочитаю чистый код JS или PHP Анонимный Скажите, как сделать чтобы одна картинка накладывалась на другую, т.е. чтобы первая не исчезала? NMitra См http://jsfiddle.net/NMitra/tqdfsytp/2/
Теория http://shpargalkablog.ru/2011/04/css-nalozhenie.html Unknown Я неправильно вопрос задал. Как сделать, чтобы при наведении на картинку появлялась другая картинка, при этом первая не исчезала. Хочу сделать светящуюся тень при наведении на картинку.

1-й вариант, делаю две разные картинки &#8211; "тень" и "картинка", тогда при наведении тень остается, а картинка исчезает.

2-й вариант, делаю две картинки, "картинка с тенью" и "картинка без тени", тогда при первом наведении исчезают обе картинки, только через несколько секунд начинает нормально работать. Даже если сайт был загружен 10 минут назад.

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *