Форум

mpit · #1 (**permalink**) 03.01.2015, 00:30

Привет всем.

Есть 2 элемента. 1 - элемент меню который при наведении мышки выезжает.
2-й - часть картинки, при наведении на который, данная часть увеличивается. Как сделать что бы при наведении на первый элемент, одновременно с ним и выполнялось действие второго элемента.

Заранее благодарен.

vuler · #2 (**permalink**) 03.01.2015, 07:25

Можешь принудительно вызвать событие. Если на jquery - $('#foo').trigger('mouseover');

mpit · #3 (**permalink**) 03.01.2015, 16:24

Опишу более подробней. Есть картинка, разделена на сектора. код сектора следующий <area href="#" title="Часть 1" alt="" shape="poly" coords="38,305,38,310,42,314,46,315,47,318,48,322, 48,326,49,328,54,323,55,316,54,312,51,309,47,308,4 1,304">. Далее есть скрипт который при наведении мышки на эту область увеличивает ее. Если нужно - скину код скрипта.

Есть элемент меню, при наведении на который - он выезжает немного, код элемента <li class="page_item page-item-4"><a href="#">Часть 1</a></li>

Как их связать между собой, чтоб при наведении на элемент меню, активировалась и часть картинки?

Заранее благодарен!

Veterinar · #4 (**permalink**) 03.01.2015, 17:50

mpit, я так понимаю, что действие, связанное с областью картинки, у тебя вынесено в функцию. Если нет, то оформи отдельной функцией.
Тогда при возникновении события в меню, вызывай функцию для картинки.

DjDiablo · #5 (**permalink**) 03.01.2015, 21:15

Предпочтительно переписать увеличивающий скрипт
Но можно замутить что-то вроде

<!DOCTYPE HTML>
<html>
  <head> 
     <style>
       .menuitem{
         border: solid 1px black;
         margin:10px;
         padding:5px;
       }
       .menuimage{
         opacity:0.2;
       }
    </style>
  
  </head>
  <body>
    
    <div id="menu1" class="menuitem" data-zoomid="#img1"> наведи на меня 1 </div>
    <div id="menu2" class="menuitem" data-zoomid="#img2"> навелди на меня 2 </div>
    <div id="menu3" class="menuitem" data-zoomid="#img3"> наведи на меня 3 </div>

    <img id="img1" class="menuimage" src="http://a136.idata.over-blog.com/64x64/0/46/91/63/ball-cute-rendez-vous-icone-6043-64-2-.png"/>  
    <img id="img2" class="menuimage"src="http://a136.idata.over-blog.com/64x64/0/46/91/63/ball-cute-rendez-vous-icone-6043-64-2-.png"/>
    <img id="img3" class="menuimage" src="http://a136.idata.over-blog.com/64x64/0/46/91/63/ball-cute-rendez-vous-icone-6043-64-2-.png"/>
  
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

    <!-- ======================== script1 ======================= -->
    <script>
      $(function(){
       $('.menuitem').hover(function(){
            var sel=$(this).attr('data-zoomid');
            $(sel).mouseover();
        },function(){
            var sel=$(this).attr('data-zoomid');
            $(sel).mouseout();
        })
      }) 
    </script>

    <!-- ======================== script2 ======================= -->
    <script>
      $(function(){
       $('.menuimage').mouseover(function(){
            $(this).stop().animate({opacity:1},500); 
       });

       $('.menuimage').mouseout(function(){
          $(this).stop().animate({opacity:0.2},500); 
       });

      }) 
    </script>

  </body>
</html>

DjDiablo · #6 (**permalink**) 05.01.2015, 00:11

Личные сообщения глючат, не могу ответить там. Вышли доступ на 4dinterface@mail.ru

Форум

Справочник

Discord чат

Курсы javascript