Jquery hover, карта изображения, проблема переключения - PullRequest
Новая
       16

Jquery hover, карта изображения, проблема переключения

0 голосов
/ 07 апреля 2011

У меня есть карта с изображением баскетбольной площадки, она отображается в областях: Area-A Area-B..so on

Когда пользователь включает, скажем, Area-C, я хочубаскетбольная площадка DIV, чтобы скрыться и баскетбольная площадка DIV, чтобы показать.Но когда я использую переключатель, каждый раз, когда пользователь наводит указатель мыши на область C, он переключается с .basketballcourt-c на .basketballcourt.Мне нужно, чтобы .basketballcourt оставался скрытым до тех пор, пока пользователь не парит над зоной-C.

Так что наведите курсор на зону-C, держите скрытым .basketballcourt до тех пор, пока вы не уйдете из зоны-C. Проблема, я думаю,является то, что область карты изображения продолжает оставаться там, поэтому, если пользователь перемещает мышь в области C, он будет переключаться.

Поэтому мне нужно спрятать площадку .basketball, когда мышь находится в зоне C, и затем показать .basketballcourt, когда она покидает зону C.Но НЕ переключайте их, пока мышь находится в области C.

КОД: 

<div class="basketballcourt">
<img src="img/court_lg.jpg" width="540" height="357" border="0" usemap="#court" />
<map name="court" id="court">
<area shape="poly" id="court-c" coords="71,301,217,301,217,129,323,129,323,301,468,301,468,171,446,132,422,102,390,76,355,57,317,44,277,39,240,41,203,50,163,67,123,98,88,139,71,172" href="#" alt="court-c" />
<area shape="poly" id="court-e" coords="539,214,468,213,469,170,449,135,422,100,391,75,353,54,313,41,270,37,234,40,192,53,153,72,115,104,87,140,70,171,69,213,0,212,0,0,541,-1" href="#" alt="court-e" />
<area shape="poly" id="court-a" coords="235,253,305,253,303,240,295,227,284,220,269,217,252,221,239,234" href="#" alt="court-a" />
<area shape="poly" id="court-b" coords="321,300,322,129,218,130,218,300" href="#" alt="court-b" />
<area shape="poly" id="court-d" coords="1,300,0,213,69,213,70,301,469,300,469,213,538,214,538,301" href="#" alt="court-d" />
</map>
</div>
<div class="basketballcourt-c">
<img src="img/court-lg_c.jpg" width="540" height="357" border="0">
</div>
<script type="text/javascript"> 
    $("#court-c").hover(function () {
    $(".basketballcourt-c").toggle();
    $(".basketballcourt").toggle();
        });
</script>

Ответы [ 4 ]

1 голос
/ 07 апреля 2011

Карта изображения находится внутри div.basketballcourt.
Когда вы наводите указатель мыши на #court-c, div.basketballcourt скрывается, когда указатель мыши срабатывает на карте изображения, когда она скрыта, что приводит к переключению назад.

0 голосов
/ 07 апреля 2011

Хорошо, вот то, что я пытался успешно ... я не понимаю, чего именно вы хотите достичь, но это сработало: 

<html>
    <head>
        <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
        var entered = false;
        function areaEntered(){
            if (!entered){
                $(".basketballcourt-c").hide();     
            }
            entered = true
        }
        function areaLeft(){
                $(".basketballcourt-c").show();     
                entered = false;
        }
        </script>
    </head>
    <body>
        <div class="basketballcourt" style="border: solid 2px black;background-color: #66F;">
            <img src="img/court_lg.jpg" width="540" height="357" border="0" usemap="#court" />
            <map name="court" id="court" style="background-color=black;">
                <area onMouseOver="javascript: areaEntered();" onMouseOut="javascript: areaLeft();" shape="poly" id="court-c" style="border: solid 2px black;" coords="71,301,217,301,217,129,323,129,323,301,468,301,468,171,446,132,422,102,390,76,355,57,317,44,277,39,240,41,203,50,163,67,123,98,88,139,71,172" href="#" alt="court-c" />
                <area shape="poly" id="court-e" coords="539,214,468,213,469,170,449,135,422,100,391,75,353,54,313,41,270,37,234,40,192,53,153,72,115,104,87,140,70,171,69,213,0,212,0,0,541,-1" href="#" alt="court-e" />
                <area shape="poly" id="court-a" coords="235,253,305,253,303,240,295,227,284,220,269,217,252,221,239,234" href="#" alt="court-a" />
                <area shape="poly" id="court-b" coords="321,300,322,129,218,130,218,300" href="#" alt="court-b" />
                <area shape="poly" id="court-d" coords="1,300,0,213,69,213,70,301,469,300,469,213,538,214,538,301" href="#" alt="court-d" />
            </map>
        </div>
        <div class="basketballcourt-c" style="border: solid 2px black; background-color: #0C6;">
            <img src="img/court-lg_c.jpg" width="540" height="357" border="0">
        </div>
    </body>
</html>
0 голосов
/ 07 апреля 2011

Вот что я в итоге сделал.Я вставил PNG для карты изображений, присвоил ей действительно высокий z-индекс и поместил под ней несколько делителей, скрывая и показывая их в зависимости от наведения PNG.Кажется, работает очень хорошо.Поскольку невидимый PNG всегда будет сверху, карта изображений не исчезнет.

Спасибо, что помогли мне обдумать это.

Разве кто-нибудь может придумать лучший способ справиться с этим?

0 голосов
/ 07 апреля 2011

Используйте jQuery .mouseenter () и .mouseleave () Заполнение события ... .hover () будет запущено больше, чем вовремя во время зависания ...

...