Question

我的代码有点问题.... 我有一个10个热点的默认图像。每个热点都包含一个文本，在将热点或文本悬停后，将加载一个新的背景颜色（新图像映射与相应的hoptspot和热点，新的背景是图像），文本颜色将会改变。将热点和标题悬停没有问题，但是悬停子行文本将加载一个新图像作为示例，将加载具有新背景颜色的下一个热点。我不知道问题是什么

这是我的html代码

<!-- MAP BEGIN -->
<div id="shoppingMap">

    <!-- HIDDEN MAPS BEGIN -->
    <img class="shoppingMap-image one" src="area_one.jpg" usemap="#ShoppingMap" /> 
    <img class="shoppingMap-image two" src="area_two.jpg" usemap="#ShoppingMap" />
    <img class="shoppingMap-image three" src="area_three.jpg" usemap="#ShoppingMap" />
    <img class="shoppingMap-image four" src="area_four.jpg" usemap="#ShoppingMap" />
    <img class="shoppingMap-image five" src="area_five.jpg" usemap="#ShoppingMap" />
    <img class="shoppingMap-image six" src="area_six.jpg" usemap="#ShoppingMap" />
    <img class="shoppingMap-image seven" src="area_seven.jpg" usemap="#ShoppingMap" />
    <img class="shoppingMap-image eight" src="area_eight.jpg" usemap="#ShoppingMap" />
    <img class="shoppingMap-image nine" src="area_nine.jpg" usemap="#ShoppingMap" />
    <img class="shoppingMap-image ten" src="area_ten.jpg" usemap="#ShoppingMap" />
    <!-- HIDDEN MAPS END -->

    <!-- IMAGE-MAPPING BEGIN -->
    <map name="ShoppingMap" id="ShoppingMap">
        <area shape="poly" coords="566,206,666,102,660,92,729,17,825,110,781,155,795,170,730,233,747,255,716,285,684,253,644,283,566,206" href="#" alt="areaOne" class="mapArea" />
        <area shape="poly" coords="745,300,746,301,788,254,780,247,831,193,842,202,886,158,930,202,923,209,950,234,820,364,791,334,785,342,745,300" href="#" alt="areaTwo" class="mapArea" />
        <area shape="poly" coords="623,325,624,326,622,428,687,447,737,447,788,389,683,283,623,324" href="#" alt="areaThree" class="mapArea" />
        <area shape="poly" coords="555,264,556,265,441,385,442,413,442,409,425,427,425,530,441,548,601,548,601,327,556,265" href="#" alt="areaFour" class="mapArea" />
        <area shape="poly" coords="686,461,687,462,686,697,962,697,962,460,687,460" href="#" alt="areaFive" class="mapArea" />
        <area shape="poly" coords="425,592,426,593,425,696,600,697,601,574,440,574,425,592" href="#" alt="areaSix" class="mapArea" />
        <area shape="poly" coords="215,574,216,575,216,639,231,639,231,655,220,655,220,698,251,698,251,711,392,709,391,698,400,698,400,591,383,574,216,574" href="#" alt="areaSeven" class="mapArea" />
        <area shape="poly" coords="54,422,55,423,54,639,205,638,204,421,55,422" href="#" alt="areaEight" class="mapArea" />
        <area shape="poly" coords="216,480,217,481,217,550,384,549,400,531,400,429,382,411,382,383,330,331,286,378,286,479,217,479" href="#" alt="areaNine" class="mapArea" />
        <area shape="poly" coords="410,144,411,145,296,260,400,363,426,363,564,224,551,209,551,193,541,182,494,231,410,145" href="#" alt="areaTen" class="mapArea" />
    </map>
    <!-- IMAGE-MAPPING END -->

    <!-- DEFAULT MAIN TEASER BEGIN -->
    <img src="floors&amp;corners_1010x764.jpg" width="1010px" height="764px" usemap="#ShoppingMap"/>
    <!-- DEFAULT MAIN TEASER END -->

    <!-- HEADLIN- & SUBLINE TEXT BEGIN -->
    <div class="areaOne">
        <span class="headlineText">Party wear</span>
        <span class="sublineText">Make your next night out extra special</span>
    </div>
    <!-- HEADLIN- & SUBLINE TEXT END -->

</div>
<!-- MAP END -->

这里是jQuery代码

    $(document).ready(function(){
      $('.mapArea, .headlineText, .sublineText').hover(function(){
       var current_area = $(this).index();
       $(this).parents('#shoppingMap').find('img.shoppingMap- image').eq(current_area).addClass('active');
       $('.headlineText, .sublineText').css({'color': '#fff'});
       $('#shoppingMap img').not('.shoppingMap-image').css({'display':'none'});
       }, function(){
       var current_area = $(this).index();
       $(this).parents('#shoppingMap').find('img.shoppingMap-image').eq(current_area).removeClass('active');
       $('.headlineText, .sublineText').css({'color': '#333'});
       $('#shoppingMap img').not('.shoppingMap-image').css({'display':'block'});
    }
);

这是CSS代码

   /* HEADLINE TEXT */
.mainHeadlineText{
font-family: arial,helvetica,sans-serif;
font-size: 18px;
font-weight: 400;
color: #333;
letter-spacing: 0.1em;
text-transform: uppercase;
background-color: #fff;
border-bottom: 2px solid #333;
margin-bottom: 0;
  }

/* MAP IMAGE */

#shoppingMap {
position: relative;
clear: none;
width: 1010px;
height: 764px;
}

#shoppingMap img {
display: block;
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
}

#shoppingMap img.shoppingMap-image {
display: none;
}

#shoppingMap img.shoppingMap-image.active {
display: block;
}

 .areaOne .headlineText {
  display: block;
  position: absolute;
  top: 18%;
  right: 25%;
  z-index: 1;
  }

 #shoppingMap .headlineText {
  font-family: arial,helvetica,sans-serif;
font-size: 15px;
font-weight: 700;
color: #333;
letter-spacing: 0.1em;
text-transform: uppercase; 
cursor: pointer;
 }

.areaOne .sublineText {
display: block;
position: absolute;
top: 21%;
right: 25%;
width: 126px;
text-align: center;
z-index: 1;
}

#shoppingMap .sublineText {
font-family: arial,helvetica,sans-serif;
font-size: 13px;
font-weight: 400;
color: #333;
cursor: pointer;
}

在悬停地图区域后显示具有新背景颜色的图像

0 个答案: