CODEWITHSUNDEEP
javascriptjqueryhtml
shmnsw
shmnsw

Reputation: 649

Image keeps blinking on mouseenter event JQuery

Is there a way to prevent an image from blinking while the mouse is over it? I believe that the problem is caused when the mouse enters an area, and then an image is shown above this area and then if the mouse is moved, then now the mouse is over the popped image that above the map's particular area, so it goes to the mouseleave part and it starts blinking.

js:

$(document).ready(function() {
    $(".map-hovers img").hide();
    var idx;
    $(".map-areas area").mouseenter(function() {
        idx = $(".map-areas area").index(this);
        $(".map-hovers img:eq(" + idx + ")").show();
        return false;
    }).mouseleave(function() {
        $(".map-hovers img").hide();
        return false;
    })
});

html:

<div id="container">
    <img src="includes/images/map_09.png" border="0" usemap="#country"/>

    <div class="map-hovers">
        <img class="North" src="includes/images/map_03.png" alt="North"/>
    </div>

    <map name="country" class="map-areas">
        <area shape="poly" cords="83,93,83,84,83,80,86,78"/>
    </map>
</div>

Upvotes: 0

Views: 207

Answers (1)

dmidz
dmidz

Reputation: 896

your assumption is totally true, I think it would work if the displayed element is a child of the area...so a solution might be to handle the events on the parent of all the stuff (#container) OR to add a flag if any .map-hovers img is hover

 $(document).ready(function() {
    var idx,
        isOverImg = false;
    $(".map-hovers img").hide()
       .mouseenter(function(){  isOverImg = true;})// add these handlers
       .mouseleave(function(){  isOverImg = false;});

    $(".map-areas area").mouseenter(function() {
        idx = $(".map-areas area").index(this);
        $(".map-hovers img:eq(" + idx + ")").show();
        return false;
    }).mouseleave(function() {
        if(!isOverImg)   $(".map-hovers img").hide();// add the condition
        return false;
    })
});

Upvotes: 1

Related Questions