javascript - Want to show a rectangle on image hover (on image) using maphighlight.js

Question

I'm using maphighlight in order to show a rectangle on image hover. However, this feature is working for single image.

I'm using image slider for multiple images. The above feature is not working when using slider.

the following is my html code

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

//working for below code but not above code

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