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

Сообщений: 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

Сообщений: 10696 Регистрация: Мар 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)

Новые темы	Объявления	Свободное общение
02:52 РСЯ и тормоза сайта: Яндекс начал штрафовать за плохой PageSpeed? 23:09 Как безопасно купить Гугл почту? 22:34 01.02. Апдейт 31.01 // Chrome готовит "чёрную метку" для ИИ? 13:45 Какой движок выбрать для форума? 13:43 Нашел скрины выплат с Сапы за 2010 год. Пошел плакать 09:26 Трафик пробил дно? Худший январь за 10 лет и внезапный рост продаж с Bing 19:27 Плагин ответа	23:25 SOCKS5 приватные прокси на 30 дней для PayPal 23:24 Google Voice аккаунты для бесплатных SMS и звонков 23:23 PayPal аккаунты для любых целей 23:02 BestX24 - быстрый и безопасный обменник криптовалют и электронных денежных средств 20:21 CryptoGraph — Анонимный обмен криптовалют без KYC и AML 12:09 Trustpilot Reviews \| Подниму рейтинг вашей компании 12:07 Купить отзывы на Яндекс и Гугл картах, на Авито, на Отзовике и IRecommend	23:51 Ставки на супер тренды в спорте 22:31 [AI] Бот за $600к советовал есть сыр с крысами. Нью-Йорк его (наконец-то) снес 22:30 Точные прогнозы на футбол 13:38 Осталось 3-5 месяцев до блокировки YouTube в России, — заявил Клименко 07:11 Список обновленных тем пуст... 17:02 Gartner обещал смерть SEO к 2026 году. Открываем метрику и проверяем 08:25 Отвратительное поведение