Изменение изображения при наведении на пункт меню

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

<ul>
<li><a href="[[~3]]">Новинки<span class="new-menu">NEW</span></a></li>
</ul>
<ul>
<li class="im-1"><a href="[[~4]]">Платья</a></li>
<ul>
<li class="menu-col im-2"><a href="[[~5]]">Вечерние платья</a></li>
<li class="menu-col"><a href="[[~6]]">Офисные, деловые платья</a></li>
<li class="menu-col"><a href="[[~7]]">Летние и повседневные платья</a></li>
<li class="menu-col"><a href="[[~8]]">Спортивные платья, туники</a></li>
</ul>
</ul>
</div>
</div>
<div class="col-sm-3 sub-menu-col">
<div class="mega-custom-menu">
<ul>
<li><a href="[[~9]]">Костюмы</a></li>
<ul>
<li class="menu-col"><a href="[[~10]]">Брючные костюмы</a></li>
<li class="menu-col"><a href="[[~11]]">Костюмы с юбкой</a></li>
<li class="menu-col"><a href="[[~12]]">Деловые костюмы</a></li>
<li class="menu-col"><a href="[[~13]]">Спортивные костюмы</a></li>
</ul>
</ul>
</div>
</div>
<div class="col-sm-3 sub-menu-col">
<div class="mega-custom-menu">
<ul>
<li><a href="[[~14]]">Одежда</a></li>
<ul>
<li class="menu-col"><a href="[[~15]]">Блузки, рубашки</a></li>
<li class="menu-col"><a href="[[~16]]">Кофты, свитера</a></li>
<li class="menu-col"><a href="[[~17]]">Брюки, лосины</a></li>
<li class="menu-col"><a href="[[~18]]">Шорты и юбки</a></li>
</ul>
</ul>
</div>
</div>
<div class="col-sm-3 sub-menu-col">
<div class="mega-custom-menu">
<ul>
<li><a href="[[~19]]">Верхняя одежда</a></li>
<ul>
<li class="menu-col"><a href="[[~20]]">Жилеты, жакеты, пиджаки</a></li>
<li class="menu-col"><a href="[[~21]]">Куртки</a></li>
<li class="menu-col"><a href="[[~22]]">Пальто и дубленки</a></li>
<li class="menu-col"><a href="[[~23]]">Шубы, полушубки</a></li>
</ul>
</ul>
</div>
</div>

<div class="col-sm-3 sub-menu-img">
<div class="mega-custom-menu img-menu">

<!-- ЗДЕСЬ ИЗОБРАЖЕНИЕ -->

</div>
</div>

</div>
</div>
</li>
</ul>

Сергей

23 февраля 2020, 17:13

1 269

Комментарии: 10

Станислав

23 февраля 2020, 17:47

Добавляете к пунктам меню картинки, выводите их на фронте например через data-image=«image»
потом присваиваете скриптом эту картинки в контейнер по ховеру и все

Сергей

23 февраля 2020, 17:54

Это то чего я и боялся ) (понимал, что без скрипта не обойтись, но, надежда умирает последней) я в JS полный ноль, придется отказаться от затеи,
Станислав, спасибо!

Руслан Сафин

23 февраля 2020, 18:01

Там три строки кода
$(document).on('mouseenter', '.menu__item', function() {
$('.container-image').attr('src', $(this).data('image'))
})
что то типа этого

Сергей

23 февраля 2020, 18:45

Спасибо за рекомендацию ), но повторюсь — я в js, как баран в библии ).
P.S. там пока 21 пункт меню (логически — это в три строки неуместно), да и 'mouseenter' как-то настораживает, мне бы hover )

Руслан Сафин

23 февраля 2020, 19:13

Именно по твоему коду

К ссылке добавляешь data-image=“image/img.jpg”
Это путь до картинки на сервере
——-
$(document).on('mouseenter', '.menu-col a', function() {
$('.img-menu > img').attr('src', $(this).data('image'))
})
———
Так же внутрь дива img-menu вставь

Сергей

23 февраля 2020, 19:17

Руслан, картинка не подгружается «Так же внутрь дива img-menu вставь ...»

Руслан Сафин

23 февраля 2020, 21:27

<img src="blank_image.png" alt="">

Забыл в код обернуть

Сергей

23 февраля 2020, 23:59

Ок, спасибо, буду пробовать, потом отпишусь.

Сергей

24 февраля 2020, 10:47

Пока безрезультатно.
Может нужен какой то js файл подключить? Содержимое папки js.

jquery-2.1.4.min.js
bootstrap.min.js
owl.carousel.min.js
chosen.jquery.min.js
Modernizr.js
jquery-ui.min.js
masonry.pkgd.min.js
imagesloaded.pkgd.min.js
isotope.pkgd.min.js
jquery.mCustomScrollbar.concat.min.js
masonry.js
functions.js
jquery.fancybox.min.js

Сергей

24 февраля 2020, 11:35

Руслан, спасибо! Все заработало.

<script>
$(document).on('mouseenter', '.menu-col a', function() {
$('.img-menu > img').attr('src', $(this).data('image'))
})
</script>

разместил ниже подключения скриптов.

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.