Я использую область карты на изображении, а при наведении курсора на изображение отображаются детали продукта.

Question

Результат для справки

Я использую область карты на изображении, а при наведении курсора на изображение отображается деталь продукта. Я прикрепил изображение результата, теперь наведите курсор на брюк, это показывает, что детали на карте, а также я добавляю полигональную область на футболку и красную рубашку, которые помогают мне изменять значения при наведении на изображение определенного продукта. Я хочу такой результат, и я новичок в этом коде, пожалуйста, помогите мне, ребята ..

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-8">
      <div class="card-deck card-design">
        <div class="card cd-cl ">
          <div class="card-body text-center">
            <p class="card-text cd-num">01</p>
            <div class="b-r">
            <p class="card-text p-t ">TYPE</p>
            <p class="card-text p-m ">SHIRT</p>
            <img src="img/w-icon.png">
            <p class="card-text d-t">COTTON</p>
            <p class="card-text d-m">100%</p>
            <p class="card-text d-t">SIZE</p>
            <p class="card-text d-m">M / L / XL</p>
            <p class="card-text d-t">COLOR</p>
            <p class="card-text d-m">RED</p>
          </div>
          </div>
        </div>
      </div>
            <div class="card-deck card-design">
        <div class="card cd-cl ">
          <div class="card-body text-center">
            <p class="card-text cd-num">02</p>
            <div class="b-r">
            <p class="card-text p-t ">TYPE</p>
            <p class="card-text p-m ">T-SHIRT</p>
            <img src="img/w-icon.png">
            <p class="card-text d-t">COTTON</p>
            <p class="card-text d-m">100%</p>
            <p class="card-text d-t">SIZE</p>
            <p class="card-text d-m">M / L / XL</p>
            <p class="card-text d-t">COLOR</p>
            <p class="card-text d-m">BLACK & WHITE</p>
          </div>
          </div>
        </div>
      </div>
            <div class="card-deck card-design">
        <div class="card cd-cl ">
          <div class="card-body text-center">
            <p class="card-text cd-num">03</p>
            <div class="b-r">
            <p class="card-text p-t ">TYPE</p>
            <p class="card-text p-m ">TROUSER</p>
            <img src="img/w-icon.png">
            <p class="card-text d-t">COTTON</p>
            <p class="card-text d-m">100%</p>
            <p class="card-text d-t">SIZE</p>
            <p class="card-text d-m">M / L / XL</p>
            <p class="card-text d-t">COLOR</p>
            <p class="card-text d-m">WHITE</p>
          </div>
          </div>
        </div>
      </div>
      <img src="img/banner.jpg" usemap="#image-map">
      <map name="image-map">
        <area target="" alt="" title="" href="#" class="red" coords="530,202,554,251,562,315,564,405,554,459,544,515,518,595,518,536,462,547,450,444,428,334,428,286,437,251,440,232,491,217,506,214" shape="poly">
        <area target="" alt="" title=""  href="" coords="734,617,715,564,695,514,676,490,661,456,642,397,630,347,625,300,622,254,623,190,676,208,735,220,767,312,773,358,783,461,783,536,752,534,728,532,732,573" shape="poly">
        <area target="" alt="" title=""  href="" coords="486,661,462,668,444,651,447,632,454,615,460,593,471,575,476,615,479,639" shape="poly">
        <area target="" alt="" title=""  href="" coords="547,890,588,881,606,875,618,844,623,814,632,769,642,751,656,769,662,793,676,824,684,854,701,861,739,868,801,856,803,832,795,797,784,763,776,734,771,710,774,680,756,664,734,622,701,634,676,637,645,627,633,619,615,624,591,627,557,620,525,607,518,636,508,663,496,681,494,703,503,747,503,798,510,836,508,868" shape="poly">
        <area target="" alt="" title=""  href="" coords="552,247,567,268,578,285,596,281,618,263,623,295,625,325,630,358,639,385,640,408,654,442,662,471,676,495,689,510,703,536,715,573,730,610,725,625,708,631,686,631,661,629,633,619,608,622,583,620,554,614,522,602,533,554,547,508,557,453,566,405,567,378,562,336,564,300,554,258" shape="poly">
    </map>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>