5 апреля 2016 в 0:17
Как сделать так, чтобы изображение товара менялось при хавере?
Как поменять картинку товара при наведении на него
Главные вкладки
5 апреля 2016 в 0:17
Комментарии
можно без js, засунув картинки в фон:
.field-image:hover{background: url(trololo.jpg);}
Либо спозиционировать картинки абсолютно и родителя растянуть на их размер, тогда:
.field-image .field-item-2{display: none;}
.field-image:hover .field-item-2{display: block;}
.field-image:hover .field-item-1{display: none;}
ИМХО, чтобы всякие анимации работали плавнее и стабильнее, лучше всё делать через цсс. А джаваскрипт нужен только для добавления/удаления классов и скроллинга страницы.
без цсс не выйдет, так как изображение необходимо менять на каждом товаре
и на каждом товаре оно будет разное
к примеру, есть товар в разделе "Кепки"
пользователь видит перед кепки, при наведении на нее изображение должно поменяться на тыльную сторону кепки
Смотрите внимательно мой второй пример
Не вариант на все варианты картинов, не проставишь в css разные картинки, только если что-то ограниченное количеством. У него = неограниченное мноежество = переменные.
А госспади, ну вы же не маленький, ей богу! Первый пример был с бэкграундом, а второй с img и второй предпочтительнее. У поля с множественным значением есть своя обёртка, а у каждого значения своя с классом .field-item. Грузишь всегда переднюю часть кепки первой картинкой, заднюю - второй и по ховеру филда инвертируешь отображение итемов. Такая хрень срабатывает в 100% случаев с абсолютно любым множественным полем. Не надо никакой темизации с шаблонами и колдовства с настройками отображения - тупо всё дефолтное + 4 строки цсс.
Такой вариант возможен, но не единственный и нни чем от других особо не отличается, кроме доп. тегов
Каких тегов? В друпале их и так хоть жопой ешь
надо передовать тыльную сторону в параметр data-src + js
Две картинки:
img + img {display: none;}
img:hover + img {display: block;}
+ позиционирование и z-index