Хотите показать прямоугольник на изображении при наведении курсора, используя 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>