我如何在引导轮播中使用“ usemap”

Question

我的usemap仅适用于第一张幻灯片。之后的所有幻灯片都没有附加使用图，这很奇怪。

<map name="kubota-desktop-map">
                    <area target="_blank" alt="Kubota-Details" title="" href="google.com" coords="70,1025,342,1097" shape="rect">
                    <area target="_blank" alt="" title="" href="google.com" coords="358,1025,633,1097" shape="rect">
                    <area target="_blank" alt="" title="" href="https://www.kubotausa.com/ " coords="1564,1009,1939,1113" shape="rect">
                </map>              
                <map name="kubota-mobile-map">
                    <area target="_blank" alt="" title="" href="https://www.kubotausa.com/finance/special-offers" coords="29,475,176,515" shape="rect">
                    <area target="_blank" alt="" title="" href="google.com" coords="184,476,332,515" shape="rect">
                    <area target="_blank" alt="" title="" href="google.com" coords="389,468,575,521" shape="rect">
                </map>
                
                <map name="tractor-desktop-map">
                    <area target="_blank" alt="" title="" href="google.com" coords="1215,1039,1490,1113" shape="rect">
                    <area target="_blank" alt="" title="" href="google.com" coords="1602,1032,1932,1129" shape="rect">
                </map>
                <map name="tractor-mobile-map">
                    <area target="_blank" alt="" title="" href="google.com" coords="118,508,255,545" shape="rect">
                    <area target="_blank" alt="" title="" href="google.com" coords="313,505,476,551" shape="rect">
                </map>
                
                
                
                
<!-- Carousel -->
                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                    <div class="normal">
                        <img src="img/slide/kub_1.jpg" alt="First slide" usemap="#kubota-desktop-map">
                    </div>
                    <div class="mobile">
                        <img src="img/slide/kub_2.jpg" alt="First slide" usemap="#kubota-mobile-map">
                    </div>
                              <!-- Static Header -->
                       
                    </div>
                    <div class="item">
                    <div class="normal">
                        <img src="img/slide/trac_1.jpg" alt="Second slide" usemap="#tractor-desktop-map">
                    </div>
                    <div class="mobile">
                        <img src="img/slide/trac_2.jpg" alt="Second slide" usemap="#tractor-mobile-map">
                    </div>
     
                  
                </div>
                
              </div><!-- /carousel -->

是的，在第一张幻灯片上，usemap可以正常工作，而其他幻灯片则无法工作。如果我从第一张幻灯片中删除了用图，则它可以在第二张幻灯片上使用。这对我来说毫无意义，不确定是否是因为传送带。

谢谢大家！