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

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

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

Новые темы	Объявления	Свободное общение
20:17 Биржи ссылок в 2026 - реально ли новичку с одним сайтом поднять копейку? 19:40 adsense в 2026: кто реально выводит копейку через киргизию? 14:09 2Index - быстрая индексация страниц сайта и обратных ссылок 12:26 Очередной взлом через плагин. Хакеры получают админку без пароля 12:12 LOSPOLLOS.COM - Конвертим по рецепту Хайзенберга. Dating, Mainstream, Binary Options 23:24 Яндекс Нейро и выдача в 2026 - остались ли лазейки для маленьких сайтов? 23:05 Раскрутка форума	17:18 SOCKS5 приватные прокси на 30 дней для PayPal 17:16 Google Voice аккаунты для бесплатных SMS и звонков 17:16 PayPal аккаунты для любых целей 15:11 HH.ru Работадателя вериф 14:49 4G/LTE Mobile Proxy 30+ geo 14:43 [UPDATE] CryptoMonitor — обмен BTC, USDT, XMR \| актуальная тема сервиса 13:32 Мониторинг обменников Сrypto-scout.io	19:39 Огородники 19:36 8 марта: желаю аптайма 99.9% и e-e-a-t без локов 16:47 Какой фильм вы любите посмотреть перед сном? 15:46 молодильные яблоки и живая вода 10:11 О природе путешествий. 01:47 Точные прогнозы на футбол 15:04 Сайты Рунета