onmouseover and onmouseleave triggering randomnly on image map

问题

I'm having an issue with onmouseover and onmouseleave event. This code only works maybe 5% of the time and I don't understand why. Just looking at the console when I hover over the image map. It triggers the onmouseover then the onmouseleave and then onmouseover again. If I comment out the bootstrap modal show and hide then the image just swaps and triggers events normally. I don't know if this is an issue with bootstrap modals or what but I have two call to action buttons on the same page that trigger normally. Any help is greatly appreciated.

Here is my jquery

  function openAutomation(){
    console.log("openAutomation");
    $('#image-map').attr('src', automation);
    $('#automationModal').modal('show');
  };

  function openIntegration() {
    console.log("openIntegration");
    $('#image-map').attr('src', integration);
    $('#integrationModal').modal('show');
  };


  function closeAutomation(){
    console.log("closeAutomation");
    $('#image-map').attr('src', original);
    $('#automationModal').modal('hide');
  };

  function closeIntegration() {
    console.log("closeIntegration");
    $('#image-map').attr('src', original);
    $('

Here is my HTML Code:

<map name="image-map" class="image-map-class">

<area class="automation-map" onmouseover="openAutomation()" onmouseleave="closeAutomation()" coords="304,559,1011,148,1143,229,1518,447,1516,485,1463,497,1444,510,1436,522,1241,636,1159,716,1076,762,959,801,813,884,494,696,304,589" shape="poly"> 

<area class="integration-map" onmouseover="openIntegration()" onmouseleave="closeIntegration()" coords="1571,477,1456,494,1418,566,1088,756,871,881,868,916,1006,993,1229,1074,1274,1063,1348,1021,1483,944,1629,856,1793,761,1848,732,1881,701,1879,686,1703,551" shape="poly">

</map>

回答1:

I would have used an svg image instead of png for that and group elements into interactive areas :

<svg viewBox=""><g class="interactive-map">your svg code (path,circle,rect)</g></svg>

In this way you will have responsive and interactive areas.

回答2:

Ok managed to get a solution working for this so for anyone using a Bootstap Modal inside an image map with the inner areas using onmouseleave and onmouseover events. Then you need to use the following css:

  .modal-backdrop {
    pointer-events: none !important;
 }
  .modal {
    pointer-events: none !important;
  }

  .modal-content{
    pointer-events: none !important;
  }

Basically without this it triggers onmouseleave as soon as onmouseover happens and then retriggers onmouseleave again. I really hope this helps someone but I feel like this was very specific for this Website

来源：https://stackoverflow.com/questions/60318095/onmouseover-and-onmouseleave-triggering-randomnly-on-image-map

标签

javascript

jquery

bootstrap-modal

onmouseover

imagemap