如何在地圖上放置鏈接標籤

我想通過HTML，CSS和Javascript創建交互式地圖功能。因此，我需要在地圖上放置鏈接標籤（或類似標籤）。下圖展示了我試圖實現的目標： enter image description here 如何在地圖上放置鏈接標籤

紅色十字應該是可點擊的鏈接（不一定只有紅色十字 - 如果透明矩形是可點擊的，也可以）。

到目前爲止，我遇到了（圖像）地圖標記，我可以在地圖上的相應位置放置矩形。我想知道這是最好的方法，還是有另一種更舒適的方法或最佳做法來做這種事情。

2013-04-30 user1828928

這是一個演示，使用qTip2在http://qtip2.com/demos。

HTML：

<div id="demo-imagemap"> 
<h3>ClICK TO TOGGLE X to see </h3> 

<img border="0" usemap="#myMap" alt="map" src="http://4.bp.blogspot.com/-Y6tP6TqJbfA/UX_vggdXEQI/AAAAAAAAAt4/ZfoonzP4Bxs/s1600/ih2LH.jpg"> 
<map id="myMap" name="myMap"> 
    <area alt="place 1" shape="rect" coords="192,103,216,119" href="#"> 
    <area alt="place 2" shape="rect" coords="128,269,156,293" href="#"> 
    <area alt="place 3" shape="rect" coords="162,311,186,327" href="#"> 
    <area alt="place 4" shape="rect" coords="172,207,200,235" href="#"> 
    <area alt="place 5" shape="rect" coords="270,225,312,259" href="#"> 
</map>

CSS：

/* Add some nice box-shadow-ness to the modal tooltip */ 
#ui-tooltip-modal { 
    max-width: 420px; 
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5); 
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5); 
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, .5); 
} 
#ui-tooltip-modal .ui-tooltip-content { 
    padding: 10px; 
}

的jQuery：

// Create the tooltips only when document ready 
$(document).ready(function() { 
    // We'll target all AREA elements with alt tags (Don't target the map element!!!) 
    $('area[alt]').qtip({ 
     content: { 
      attr: 'alt' // Use the ALT attribute of the area map for the content 

     }, 
     show: 'click', 
     hide: 'click', 

     style: { 
      classes: 'ui-tooltip-tipsy ui-tooltip-shadow' 
     } 
    }); 
});

演示使用自己的地圖，嘗試中心位於X，並在幾左側： - http://jsfiddle.net/x5baU/11/

來源

2013-04-30 16:28:10 Dylan

好的建議 - 謝謝 – user1828928 2013-04-30 17:12:25

這很好，很高興。如果這回答了您的問題，請標記爲已回答。你需要進一步的幫助嗎？乾杯。 – Dylan 2013-04-30 18:27:33

您既可以使用HTML圖像映射：

http://en.wikipedia.org/wiki/Image_map

或者乾脆把你的鏈接上使用絕對定位地圖圖像的頂部。

我可能會採用絕對定位方法，然後您可以將自定義樣式的錨點標籤放在需要它們的位置，並將您的紅色X作爲錨點中的圖像或錨點上的背景圖像。

來源

2013-04-30 15:54:17

如果你做了絕對定位的鏈接，那麼你也可以應用懸停風格來改變背景（紅色的X），當用戶將鼠標懸停在紅色的X上時： – 2013-04-30 15:56:51

如何在地圖上放置鏈接標籤

回答

相關問題