想要使用maphighlight.js在图像上悬停（在图像上）显示矩形

Question

我正在使用maphighlight以在图像悬停上显示矩形。但是，此功能适用于单个图像。

我正在使用图像滑块来显示多个图像。使用滑块时，上述功能无效。

以下是我的HTML代码

<div class="slideshow-container">
    <div class="mySlides">
       <img src="images/PartNumberDot.jpg" width="95%" height="100%" usemap="#image-map" class="map" />
         <map name="image-map">
           <area target="" alt="" title="" href="" id="RE555087" coords="119,267,172,285" shape="rect">
           <area target="" alt="" title="" href="" id="RE541746" coords="119,314,173,332" shape="rect">
            <area target="" alt="" title="" href="" id="RE539279" coords="117,339,174,360" shape="rect">
         </map>
      </div>
      <div class="mySlides">
         <img src="images/background1.jpg" width="95%" height="100%" usemap="#image-map1" class="map" />
            <map name="image-map1">
               <area target="" alt="" title="" href="" id="RE555067" coords="119,267,172,285" shape="rect">
               <area target="" alt="" title="" href="" id="RE541756" coords="119,314,173,332" shape="rect">
               <area target="" alt="" title="" href="" id="RE539216" coords="117,339,174,360" shape="rect">
            </map>
      </div>  
</div>

//适用于以下代码，但不适用于代码

<img src="images/PartNumberDot.jpg" width="95%" height="100%" usemap="#image-map" class="map" />
  <map name="image-map">
    <area target="" alt="" title="" href="" id="RE555087" coords="119,267,172,285" shape="rect">
    <area target="" alt="" title="" href="" id="RE541746" coords="119,314,173,332" shape="rect">
    <area target="" alt="" title="" href="" id="RE539279" coords="117,339,174,360" shape="rect">
 </map>