帶紅點的地圖

我有一個世界地圖，包含紅點，當你將鼠標懸停在點上時，列出的國家出現（可能是1或很多）列表中的所有項目都是鏈接到庫存頁面上的部分。帶紅點的地圖

我剛學了jQuery，所以我面臨着一些問題，也許有人可以幫我：

我需要根據身高或國家行國家自動調整名單有
應該只有一個列表一次顯示。
一次我將鼠標懸停在該點，則顯示國家，鼠標移出直到我刷新頁面
沒有我的jQuery代碼是有意義的，有沒有更好的方式，它不會再工作？

這是大多數的div模樣的HTML部分：

<div id="austDiv32"> 
<img class="dot5" src="../images/dot.png" alt="Austria" style="margin: 80px 0 0 450px;" /> 
<div id="Div32" class="theDiv" style="margin: 20px 0 0 460px;"> 
<a href="availability.aspx?region=Austria" class="style1">Austria/a> 
<a href="availability.aspx?region=Czech_Republic-Hungary"class="style1"> 
CzechRepublic<br />Hungary</a> 
<a href="availability.aspx?region=Serbia" class="style1">Serbia</a> 
</div> 
</div>

這是jQuery的樣子：

$(function() { 

     $(".dot").mouseover(function() { 
      $(this).parent().children("div").animate({ height: "130px" }, 1000).css("visibility", "visible").delay(3000); 
     }); 

     $(".dot").mouseout(function() { 
      $(this).parent().children("div").fadeOut(600).removeClass(".theDiv"); 
     }) 


     $(".dot2").mouseover(function() { 
      $(this).parent().children("div").animate({ height: "18px" }, 1000).css("visibility", "visible").delay(1000); 

     }); 

     $(".dot2").mouseout(function() { 
      $(this).parent().children("div").fadeOut(600).removeClass(".theDiv"); 

     }); 


     $(".dot3").mouseover(function() { 
      $(this).parent().children("div").animate({ height: "30px" }, 1000).css("visibility", "visible").delay(1000); 
     }) 

     $(".dot3").mouseout(function() { 
      $(this).parent().children("div").fadeOut(600).removeClass(".theDiv").end(); 

     }); 

     $(".dot4").mouseover(function() { 
      $(this).parent().children("div").animate({ height: "50px" }, 1000).css("visibility", "visible").delay(1000); 
     }) 

     $(".dot4").mouseout(function() { 
      $(this).parent().children("div").fadeOut(600).removeClass(".theDiv"); 

     }); 


     $(".dot5").mouseover(function() { 
      $(this).parent().children("div").animate({ height: "70px" }, 1000).css("visibility", "visible").delay(1000); 
     }) 

     $(".dot5").mouseout(function() { 
      $(this).parent().children("div").fadeOut(600).removeClass(".theDiv"); 

     }); 

     $(".dot6").mouseover(function() { 
      $(this).parent().children("div").animate({ height: "145px" }, 1000).css("visibility", "visible").delay(1000); 
     }) 

     $(".dot6").mouseout(function() { 
      $(this).parent().children("div").fadeOut(600).removeClass(".theDiv"); 

     }); 



    }); 

</script>

來源

2012-04-05 Jakester59

你真的需要把一個小演示，使人們可以看到什麼錯。嘗試在jsfiddle.net上發帖，然後在這裏發佈網址。 – 2012-04-05 20:45:58

這是大多數div的樣子：

Austria Czech Republic
Hungary Serbia

– Jakester59 2012-04-06 13:26:18

這是不相關解決問題，但它會幫助你製作更好的代碼：

而不是用不同的值重複相同的代碼，讓你的元素包含你需要的數據。那麼你只需要一整套功能。

例如：

<div class='dot' data-aniHeight='18px'></div>

JS：

$(".dot").mouseover(function() { 
    var aniHeight = $(this).data('aniHeight'); 
    $(this).parent().children("div").animate({ height: aniHeight }, 1000).css("visibility", "visible").delay(1000); 
});

來源

2012-04-05 20:45:07

謝謝你，我會嘗試你的建議。 – Jakester59 2012-04-06 14:33:54

帶紅點的地圖

回答

相關問題