建設與jQuery

我創建jQuery中的互動式地圖，並正在使用自定義的手繪地圖基本的互動地圖。我在地圖上放置了一系列「觸發點」，絕對位置，相對於地圖的大小。當使用懸停在這些觸發點上時，會顯示工具提示並顯示有關位置的信息。建設與jQuery

HTML/CSS：

<div id="map" style="position:relative; background: url(images/map.jpg"> 
    <div class="trigger" data-loc="locationA" style="position:absolute; left:10px; top:3px"><h1 class="tooltip">Location A Title</h1></div> 
    <div class="trigger" data-loc="locationB" style="position:absolute; left:0px; top:24px"><h1 class="tooltip">Location B Title</h1></div> 
    <div class="trigger" data-loc="locationC" style="position:absolute; left:140px; top:35px"><h1 class="tooltip">Location C Title</h1></div> 
    <div class="trigger" data-loc="locationD" style="position:absolute; left:70px; top:103px"><h1 class="tooltip">Location D Title</h1></div> 
</div>

JQuery的：

$(".trigger").hover(function(){ 
    $(this).find(".tooltip").fadeIn(); 
}, function(){ 
    $(this).find(".tooltip").fadeOut(); 
});

幾個問題：
1）這是去了解與jquery一個基本的互動地圖的最佳方式？

2）我想有位置列表關閉的權利。當用戶點擊鏈接時，它也應該觸發相關鏈接的工具提示。如上所示，每個觸發點都有一個data-loc屬性。如果我在錨鏈接到正確的設置相同的數據點，我將如何使用jQuery將它們連接起來，並引發進出有關提示的衰落？

來源

2012-07-10 JCHASE11

+1聽起來很酷 – pixelbobby 2012-07-10 19:00:10

順便說一句，.tooltip隱藏默認情況下 – JCHASE11 2012-07-10 19:02:32

我不認爲你可以做2標準的提示，除非你想下去編程創建鼠標事件的可怕道路。我認爲你必須創建自己的類似的浮動div。無論如何，這可能是一個更好的主意，因爲工具提示對於觸摸屏用戶來說毫無用處，您也可以通過觸摸觸發它們。 – 2012-07-10 19:21:00

據我所知，還沒有一個最好方式做到這一點。一個稍微更具描述性的方法是use the area tag而不是div。

<!DOCTYPE > 
<html> 
<body> 
    <img src="image/all balls.jpg" style="width: 450px; height: 450px;" 
     alt="Balls" usemap="#BallMap" /> 
    <map name="BallMap"> 
    <area id="whiteArea" class="hoverArea" shape="circle" coords="78,81,76.5" 
      nohref="nohref" alt="white" /> 
    <area id="blueArea" class="hoverArea" shape="circle" coords="260,81,76.5" 
      nohref="nohref" alt="blue" /> 
    <area id="redArea" class="hoverArea" shape="circle" coords="84,254,76.5" 
      nohref="nohref" alt="red" /> 
    </map> 
</body> 
</html>

進行類似：

$(".hoverArea").hover(function(){ 
    showToolTip($(this)); 
}, function(){ 
    hideToolTip($(this)); 
});

可能有點更多的工作來編寫自定義函數顯示工具提示。（注：我從來沒有用過區自己。）

更新

有幾個方法可以做到這一點。

由於您已經在使用絕對值，因此您可以在當前div上添加另一個div，但讓它們絕對定位到正確的位置。克里，但工作。

我不會那樣做，導致這將是我認爲更好的方式：

<div id="map" style="position:relative; background: url(images/map.jpg"> 
    <div class="trigger" data-loc="locationA" id="locationA" 
     style="position:absolute; left:10px; top:3px"> 
    <h1 class="tooltip">Location A Title</h1> 
    </div> 
    <div class="trigger" data-loc="locationB" id="locationB" 
     style="position:absolute; left:0px; top:24px"> 
    <h1 class="tooltip">Location B Title</h1> 
    </div> 
    <div class="trigger" data-loc="locationC" id="locationC" 
     style="position:absolute; left:140px; top:35px"> 
    <h1 class="tooltip">Location C Title</h1> 
    </div> 
    <div class="trigger" data-loc="locationD" id="locationD" 
     style="position:absolute; left:70px; top:103px"> 
    <h1 class="tooltip">Location D Title</h1> 
    </div> 
</div> 

<div class="sidebar"> 
    <div class="trigger" data-loc="locationA"> Loc A 
    </div> 
    <div class="trigger" data-loc="locationB"> Loc B 
    </div> 
    <div class="trigger" data-loc="locationC"> Loc C 
    </div> 
    <div class="trigger" data-loc="locationD"> Loc D 
    </div> 
<div>

然後用jQuery：

$(".trigger").hover(function(){ 
    $("#" + $(this).data("loc") + " .tooltip").fadeIn(); 
}, function(){ 
    $("#" + $(this).data("loc") + " .tooltip").fadeOut(); 
});

來源

2012-07-10 19:11:19

這是有幫助的，我正在考慮使用區域......但你能提供一個想法/解決方案到我的問題的第2部分？ – JCHASE11 2012-07-10 19:13:56

雖然我覺得我更喜歡定位VS影像地圖根據您的請求仍然 – JCHASE11 2012-07-10 19:14:56

更新。 – 2012-07-10 19:25:53

回答

相關問題