如何在地图上放置链接标签

我想通过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

如何在地图上放置链接标签

回答

相关问题