Image Map: show different images on hover

Question

So I'm working on a website and I have a map with different hotspots that will show information about different countries when you click on them. Also the highlighted countries look a bit different than the rest of the map.

so I saved each one of the countries as a different image and the empty map (with the hotspots ) is a transparent png. when I hover over France the map with France highlighted will show behind the main map and when I remove the cursor from that part of the map it will hide the image.

But for some reason when I hover over the hotspot the image with France starts flickering in and out unless I stop moving the mouse.

The main map with the hotspots:

The background map with the highlighted country:

My code:

<img id="Image-Maps-Com-image-maps" class="img-responsive map-empty" src="/assets/img/map-empty.png" border="0" usemap="#image-maps" style="z-index: 900;"/>
    <map name="image-maps" id="ImageMapsCom-image-maps">
        <area id="point-port" shape="poly" coords="100,513,149,541,86,652,53,650,56,593" />
        <area id="point-italy" shape="poly" coords="465,473,571,450,603,478,572,491,714,645,662,707,628,755,633,754,619,756,567,732"/>
        <area id="point-aust" shape="poly" coords="664,394,622,386,563,426,592,457,661,450"/>
        <area id="point-france" shape="poly" coords="248,347,401,312,483,399,458,434,442,450,458,476,454,502,467,524,440,546,392,543,365,552,320,545,289,534,271,515,298,433"/>
    </map>
    <img src="/assets/img/Map-France.png" class="img-responsive maps map-france" style="position: absolute; display: none;"/>

JS:

$('#point-france').hover(function() {
    $('.map-france').show();
    $('.map-france').css({'top' : $('.map-empty').position().top, 'left' : $('.map-empty').position().left, 'z-index': '1' });
},function() {
    $('.map-france').hide();
});

Can anyone help me figure out why this happens?

JSFiddle Example

[JsFiddle](https://jsfiddle.net/a3s331qp/1/) – urbz Jan 10 '17 at 21:20 — urbz, Jan 10 '17 at 21:20

score 0 · Answer 1 · edited May 23 '17 at 12:01

EDIT 2: This appears to have been answered here already using mouseenter and mouseleave instead of hover

EDIT: Adjusted the CSS to change the z-index of the point-france to 2 and .map-france to -1

The issue seems to be that when it moves the map and shows it no longer detects the hover. So when you move the mouse it refreshes and hides the map then shows the map again after. changing the Z-index so that map-france is under point-france

$(document).ready(function() {

  $('#point-france').hover(function() {
      $('.map-france').show();
      $('#point-france').css({'z-index':'2'});
      $('.map-france').css({'top' : $('.map-empty').position().top, 'left' : $('.map-empty').position().left, 'z-index': '-1' });
    },function() {
      $('.map-france').hide();
    });

});

body {

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="Image-Maps-Com-image-maps" class="img-responsive map-empty" src="https://www.maloufsleep.com/assets/img/map-empty.png" border="0" usemap="#image-maps" style="z-index: 900;"/>
  <map name="image-maps" id="ImageMapsCom-image-maps">
   <area id="point-port" shape="poly" coords="100,513,149,541,86,652,53,650,56,593" />
   <area id="point-italy" shape="poly" coords="465,473,571,450,603,478,572,491,714,645,662,707,628,755,633,754,619,756,567,732"/>
   <area id="point-aust" shape="poly" coords="664,394,622,386,563,426,592,457,661,450"/>
   <area id="point-france" shape="poly" coords="248,347,401,312,483,399,458,434,442,450,458,476,454,502,467,524,440,546,392,543,365,552,320,545,289,534,271,515,298,433"/>
  </map>
  <img src="https://www.maloufsleep.com/assets/img/Map-France.png" class="img-responsive maps map-france" style="position: absolute; display: none;"/>

OLD ANSWER

This probably isn't the best way of doing it but it seems to work.

What this does is have 2 hover checks. One for #point-france and one for .map-france.

Thank you, this fixed the flickering issue but it doesn't' hide the map until the mouse goes out of the image ( and not just the hotspot ) I think what happens is, map france loads on top of the map empty and I tried to fix that with adjusting the z index but I guess that didn't work — , Jan 10 '17 at 21:42
Try setting the z-index to -1 on .map-france and z-index to 2 on #point-france. This should also make it so you only need the one hover check. — Timothy LeondTV Wall, Jan 10 '17 at 22:08
for some reason that didn't work. setting the z-index to -1 basically hides the image. I even set the parent divs z-index to -1 but the map still doesn't show up — , Jan 10 '17 at 23:45
Just out of curiosity. Is it working on jsfiddle? It works fine on js fiddle for me as long as the z-index of `.map-france` is -1. I have tried changing the background color and image but it always seems to work for me. I have tried it in chrome, firefox, and Edge. Works on all of them in jsfiddle. — Timothy LeondTV Wall, Jan 11 '17 at 03:32
I did some more digging and it looks like your question was answered here: http://stackoverflow.com/questions/18464370/jquery-mouseover-and-mouseout-keeps-flashing You want to use `mouseenter` and `mouseleave` instead — Timothy LeondTV Wall, Jan 11 '17 at 03:39
Alternatively you might need to use a plugin since you are using an area rather than a div for highlighting. see this link http://stackoverflow.com/questions/745110/using-jquery-hover-with-html-image-map Let me know how it goes. I'm interested to see if this helps. — Timothy LeondTV Wall, Jan 11 '17 at 04:16

Image Map: show different images on hover

1 Answers1