CODEWITHSUNDEEP
jqueryhovertoggle
Xtian
Xtian

Reputation: 3587

Jquery hover, image map, toggle problem

I have an image map of a basketballcourt, I have it mapped out in areas: Area-A Area-B..so on

When a user hovers on lets say, Area-C, I want the DIV basketballcourt to hide and DIV basketballcourt-c to show. But when I use toggle, every time a user moves the mouse over Area-C it toggles from .basketballcourt-c to .basketballcourt. What I need is .basketballcourt to stay hidden until a user hovers off of Area-C.

So hover over Area-C, keep .basketballcourt hidden, until hover off of Area-C The problem, i think, is that area of the image map continues to be there, so if a user moves the mouse while in Area-C it will toggle.

So I need to hide .basketball court when the mouse is in Area-C, and then show .basketballcourt when it leaves Area-C. But NOT toggle the two while the mouse is in Area-C.

CODE:

<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>

Upvotes: 0

Views: 2356

Answers (4)

haemse
haemse

Reputation: 4273

Ok here is what i tried sucessfully ... i do not really get, what you exactly want to achieve but this worked:

<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>

Upvotes: 0

Xtian
Xtian

Reputation: 3587

Here is what I ended up doing. I put in a PNG for the image map, gave it a really high z-index, and put mulitple divs underneath it hiding and showing them based on the hover of the PNG. Seems to be working pretty well. Since the invisible PNG will always be on top the imagemap doesn't go away.

Thanks for helping me think it through.

Unless anyone can think of a better way of handling this?

Upvotes: 0

haemse
haemse

Reputation: 4273

Use the jQuery .mouseenter() and .mouseleave() event ... .hover() fill be fired more than on time during hovering ...

Upvotes: 0

sv_in
sv_in

Reputation: 14049

The imagemap is inside div.basketballcourt.
When you move your mouse over #court-c,div.basketballcourt is getting hidden on which the mouse out is fired on the imagemap as it gets hidden, leading to the reverse toggle.

Upvotes: 1

Related Questions