Search code examples
javascriptjqueryhovermappingarea

Show hidden image on mouseover

I have a problem when trying achieve hover effect on mapped image. I have an image with mapped areas and on all of them I want to show a different image when hover.

You can see my work so far here:

http://mantasmilka.com/map/pries-smurta.html

The problem is when I hover over area it show the image, but when I move the cursor (not leaving the area) it starts flickering. It takes area space pixel by pixel.

I've tried working with Javascript and jQuery solutions:

Javascript:

mouseenter="document.getElementById('Vilnius').style.display = 'block';" mouseleave="document.getElementById('Vilnius').style.display = 'none';"

jQuery:

$('.hide').hide();
setTimeout(function(){
    $("#area-kaunas").mouseenter(function(){
        $('#Kaunas').show();
    });
    $("#area-kaunas").mouseleave(function(){
        $('#Kaunas').hide();
    });
}, 500);
Solution

  • There is a css property called "pointer-event" which gives the value "none" to the img tags that overlap in the mapped image and works as you need it. This is the documentation https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

    The problem will always be the compatibility of browsers.