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

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

<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
modx.pro
1
650
0

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

Станислав
Станислав
23 февраля 2020, 17:47
0
Добавляете к пунктам меню картинки, выводите их на фронте например через data-image=«image»
потом присваиваете скриптом эту картинки в контейнер по ховеру и все
    Сергей
    Сергей
    23 февраля 2020, 17:54
    0
    Это то чего я и боялся ) (понимал, что без скрипта не обойтись, но, надежда умирает последней) я в JS полный ноль, придется отказаться от затеи,
    Станислав, спасибо!
      Руслан Сафин
      Руслан Сафин
      23 февраля 2020, 18:01
      0
      Там три строки кода
      $(document).on('mouseenter', '.menu__item', function() {
      $('.container-image').attr('src', $(this).data('image'))
      })
      что то типа этого
        Сергей
        Сергей
        23 февраля 2020, 18:45
        0
        Спасибо за рекомендацию ), но повторюсь — я в js, как баран в библии ).
        P.S. там пока 21 пункт меню (логически — это в три строки неуместно), да и 'mouseenter' как-то настораживает, мне бы hover )
          Руслан Сафин
          Руслан Сафин
          23 февраля 2020, 19:13
          +1
          Именно по твоему коду

          К ссылке добавляешь 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
            0
            Руслан, картинка не подгружается «Так же внутрь дива img-menu вставь ...»
              Руслан Сафин
              Руслан Сафин
              23 февраля 2020, 21:27
              0 
              <img src="blank_image.png" alt="">
              Забыл в код обернуть
                Сергей
                Сергей
                23 февраля 2020, 23:59
                0
                Ок, спасибо, буду пробовать, потом отпишусь.
    Сергей
    Сергей
    24 февраля 2020, 10:47
    0
    Пока безрезультатно.
    Может нужен какой то 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
      0
      Руслан, спасибо! Все заработало.
      <script>
$(document).on('mouseenter', '.menu-col a', function() {
$('.img-menu > img').attr('src', $(this).data('image'))
})
</script>
      разместил ниже подключения скриптов.
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        10