Как сделать смену фото при наведении на список ссылок в ZeroBlock в Tilda

1

Создали ZeroBlock

2

Создали в нём 12 Text элементов о ссылкой #

3

Создали в нём 12 Image элементов о ссылкой # , расположили их друг под другом

4

Добавили код в блок другое - Т123
Поменяли в коде ID Zero
var IDZero = "#rec139363338"

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Делаем смену картинок при наведении на список из текстовых ссылок или shape объектов.
Длительность видео 22 минуты

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера


<style>
.phPar {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    overflow: hidden;
}
.active{opacity:1;}

.middleL{
   -webkit-transform: rotate(45deg) !important;
   -ms-transform: rotate(45deg) !important;
   transform: rotate(45deg) !important;
   overflow: hidden;
}

.phChl, .linkH{
   transition: all 0.4s ease-in-out;
}
.linkH.actBtn {
    border-bottom: 3px solid #fff !important;
}
.mvDown{
    -webkit-transform:  translateY(120%);
    -ms-transform: translateY(120%);
    transform:  translateY(120%);
    opacity:0;
}
.mvUp{
    -webkit-transform:  translateY(-120%);
    -ms-transform:  translateY(-120%)
    transform:  translateY(-120%);
    opacity:0;
}
</style>

<script>
    $(document).ready(function(){
      var IDZero = "#rec166121041";
      $(IDZero+' div[data-elem-type="image"] a').parent().addClass('phPar');
      $(IDZero+' div[data-elem-type="image"] a>img').addClass('phChl');
      $(IDZero+' div[data-elem-type="text"] a').addClass('linkH');
      $('.linkH').click(function(event){event.preventDefault()});
      $('.phPar a').addClass('middleL');
      $('.linkH:first').addClass('actBtn');$('.phChl').not(':first').addClass('mvUp');
      $('.phChl:first').addClass('active');
      $('.linkH').hover(function(){if(!$(this).hasClass('actBtn')){
       $('.linkH').removeClass('actBtn');$(this).addClass('actBtn');
       linkH = $(".linkH").index(this);$('.mvUp').removeClass('mvDown');
       $('.active').addClass('mvDown');$('.phChl:eq('+linkH+')').removeClass('mvUp').addClass('active');
	   $('.mvDown').removeClass('active');setTimeout(function(){$('.mvDown').addClass('mvUp'); }, 400);
	   setTimeout(function(){if(!$('.phChl').hasClass('active')){
        $('.phChl:eq('+linkH+')').removeClass('mvUp mvDown').addClass('active');}; },600); }; },function(){});
});
</script>