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

Сообщений: 177 Регистрация: Ноя 2010

13 Ноября 2015 08:52

Добрый день, уважаемые форумчане! Подскажите, пожалуйста, как реализовать на сайте, такое, чтобы на определенной странице имелся текст и картинка, а при наведении курсора мышки данная картинка менялась на другую, при смещении курсора мышки от картинки она возвращалась в первоначальную. Может есть какой-то плагин, чтобы смена картинки была с какими-нибудь эффектами? Заранее благодарен.

30.000 подписчиков в Инстаграм САМОСТОЯТЕЛЬНО (Автодирект, комментарии, отписка, лайки), а Заработать можно тут!. Надежный, недорогой хостинг!.

Библиотекарь

Сообщений: 13 Регистрация: Апр 2013

13 Ноября 2015 09:40

Если на чистом CSS то приблизительно так:1. Создаем блок с background-image
2. В этот блок помещаем второе изображение, но делаем к примеру opacity=0 или width=0;height=0;
3. На событие hover навешиваем opacity=1 или width=(реальная ширина изображения);height=(реальная высота изображения);
4. анимируем это дело переходами transitionВ первом случае изображение будет плавно проявляться сквозь фон. Во втором как бы приближаться из бесконечности к пользователю.

Алексей

Сообщений: 177 Регистрация: Ноя 2010

13 Ноября 2015 15:37

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

Feanorr

Сообщений: 565 Регистрация: Янв 2013

13 Ноября 2015 15:55

Алексей, Если вам не приходилось работать с CSS, то лучше заплатите человеку он вам всё сделает. Другого решения просто не вижу...

sharkson

Сообщений: 5425 Регистрация: Янв 2014

13 Ноября 2015 16:02

Цитата
Алексей пишет: К сожалению не приходилось работать с CSS.

Значит или надо начинать самому, или нанять кого-то.

НАДЕЖНЫЙ И НЕДОРОГОЙ ХОСТИНГ ТУТ
НЕДОРОГОЙ ХОСТИНГ
ПРОДАМ БЛОГ ЖЖ
СОЗДАНИЕ И НАСТРОЙКА MediaWiki и phpbb3

justman

Сообщений: 448 Регистрация: Июн 2015

13 Ноября 2015 16:27

Цитата
Алексей пишет: К сожалению не приходилось работать с CSS. Если есть возможность расписать на небольшом примере, чтобы было понятно, либо если есть еще какие-нибудь альтернативные варианты? Заранее благодарен.

Ребята, как сделать так, чтобы ездить на Феррари. Сразу скажу, купить не предлагать, рассмотрю только альтернативные варианты.
Если без троллинга, то CSS можно освоить за день. Без шуток, реально за день освоите азы, этого достаточно, чтобы реализовать Вашу задачу. Что касается: "Покажите пример", то нет смысла, т.к., вы его даже правильно на сайт не подключите.

Изменено: justman - 13 Ноября 2015 16:29

Dmitrii Lysjuk

Сообщений: 684 Регистрация: Ноя 2012

13 Ноября 2015 18:10

ну вот примерно как это должно быть:

Код
div.bla-bla { background-image: url(image1.jpg); } div.bla-bla:hover { background-image: url(image2.jpg); }

т.е создаете блок, через css добавляете ему бекграунд картинку, а через hover добавляете 2-ю картинку. все

Александр

Сообщений: 433 Регистрация: Ноя 2012

13 Ноября 2015 18:31

Dmitrii Lysjuk, примерно так, но не самый лучший вариант, моментально не подгрузится. Лучше использовать спрайты. Статья на хабре http://habrahabr.ru/post/159027/

Coder

Сообщений: 10174 Регистрация: Мар 2013

13 Ноября 2015 18:34

_http://myrusakov.ru/css-hover-image.html

_http://citforum.ru/internet/webd/article_29.shtml

✓ Проверенные скрипты и полезности для сайта

✓ Курсы

✓ Сервис временных ссылок

Алексей

Сообщений: 177 Регистрация: Ноя 2010

#10

14 Ноября 2015 19:20

Всем спасибо за советы и помощь! То что не приходилось работать, я имел ввиду "вплотную", азы небольшие есть.)))

Dmitrii Lysjuk

Сообщений: 684 Регистрация: Ноя 2012

#11

15 Ноября 2015 00:18

Александр, да, спрайты крутая вещь. один файл сделал, он сразу и загрузился, так что не спорю smile:)

просто написал, как сделать замену, так что верно подметили, что

Цитата
Александр пишет: примерно так, но не самый лучший вариант

Похожие темы:

17.10.2020 16:55	Смена темы на WordPress без входа в админку?
12.08.2019 10:36	Отображение картинок.
09.05.2019 12:47	Помогите WPGrabber Статьи парсятся без картинок - сбой сервера
08.03.2018 18:12	Дубли картинок
24.05.2017 09:58	Сохранение картинок

Читают тему (гостей: 1, пользователей: 0, из них скрытых: 0)

Новые темы	Объявления	Свободное общение
17:55 Dao.AD: Монетизация и покупка Push/Pops/Inpage и Video трафика! 17:04 Webvork - международная товарная СРА сеть с сертифицированными офферами на Европу. 15:43 Adtrafico - Правильная партнёрская сеть под бурж трафик 12:50 Партнерская программа OWNR WALLET 01:46 Настроить поставщиков в программе E-Trade PriceList Importer 15:26 Найти элемент в коде 11:51 Bropush - твой бро в монетизации сайта push-уведомлениями	18:15 Coin Click.cc - Быстрый и надежный обмен электронных валют в два клика 16:54 Прием платежей для HIGH RISK \| Прием платежей без сайта 16:54 Услуги рассылки Viber\|Whatsapp\|IMO. 16:53 Услуги рассылки Вконтакте 16:53 Рассылка в TELEGRAM \|Большой опыт работы \| Любые тематики \| Лучшая конверсия 18:17 Восстановление сайтов из Вебархива на Wordpress 17:59 Мобильные и Резидентные Прокси Для Соц Сетей \| 3 Гб Бесплатно	16:32 Видимо, похороны СУПРа уже прошли как-то по-тихому 16:08 Точные прогнозы на футбол 12:48 Каспкрски ОС 11:21 Ням-ням! - 8 деликатесов, которые когда-то ели только бедные люди 14:41 Бесплатный мини-аудит юзабилити и конверсии + технический SEO-аудит в подарок 15:24 Добро пожаловать в цифровой мир... 22:58 У меня дикая просадка по РСЯ за последние 3 суток