Как связать 2 события.
Привет всем.
Есть 2 элемента. 1 - элемент меню который при наведении мышки выезжает. 2-й - часть картинки, при наведении на который, данная часть увеличивается. Как сделать что бы при наведении на первый элемент, одновременно с ним и выполнялось действие второго элемента. Заранее благодарен. |
Можешь принудительно вызвать событие. Если на jquery - $('#foo').trigger('mouseover');
|
Опишу более подробней. Есть картинка, разделена на сектора. код сектора следующий <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> Как их связать между собой, чтоб при наведении на элемент меню, активировалась и часть картинки? Заранее благодарен! |
mpit, я так понимаю, что действие, связанное с областью картинки, у тебя вынесено в функцию. Если нет, то оформи отдельной функцией.
Тогда при возникновении события в меню, вызывай функцию для картинки. |
Предпочтительно переписать увеличивающий скрипт
Но можно замутить что-то вроде <!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> |
Личные сообщения глючат, не могу ответить там. Вышли доступ на 4dinterface@mail.ru
|
Часовой пояс GMT +3, время: 20:57. |