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

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

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

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

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

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

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

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

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

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

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

Вывод:

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

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

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

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

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

Читайте также:  S dns address could not be found

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

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

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


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 картинку с пареходом на вторую.

Читайте также:  Как посмотреть загрузки в internet explorer

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

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

Александр, 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, не получается разобраться в Вашем ответе. Покажите пожалуйста на примере, буду премного благодарен. Хотел для примера загрузить то, что у меня — не получается. Какой то недопустимый тег.
Где что на что менять ума не приложу.
Спасибо что помогаете таким как я! 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

Читайте также:  Динамик 10гд 30б характеристики

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-й вариант, делаю две разные картинки — "тень" и "картинка", тогда при наведении тень остается, а картинка исчезает.

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

Ссылка на основную публикацию
Adblock detector