milka milka - 13 days ago 7
Javascript Question

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

Answer

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.