如何在地图上放置链接标签
提问于 2013-04-30 15:49:53
我想通过HTML，CSS和Javascript创建一个交互式地图功能。因此，我需要在地图上放置链接标签(或类似)。下图说明了我正在尝试实现的目标：
红叉应该是可点击的链接(不一定只是红叉-如果透明的矩形是可点击的就可以了)。
到目前为止，我遇到了(image-)map标签，使用它我可以在地图上的相应位置放置矩形。我想知道这是不是最好的方法，或者是否有其他更舒适的方法或最佳实践来做这些事情。
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-04-30 16:28:10
这是一个在http://qtip2.com/demos上使用qTip2的演示。
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/
Stack Overflow用户
发布于 2013-04-30 15:54:17
您可以使用html图像映射：
http://en.wikipedia.org/wiki/Image_map
或者简单地使用绝对定位将链接放在地图图像的顶部。
我可能会使用绝对定位方法，然后您可以将自定义样式的锚点标记放在需要它们的地方，并将红色X作为锚点内的图像或锚点上的背景图像。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16303966
复制
腾讯云开发者
