2

我想通过 HTML、CSS 和 Javascript 创建交互式地图功能。因此，我需要在地图上放置链接标签（或类似标签）。下图说明了我想要实现的目标：在此处输入图像描述

红十字应该是可点击的链接（不一定只有红十字——如果透明矩形是可点击的就可以了）。

到目前为止，我遇到了 (image-)map 标签，我可以使用它在地图上的相应位置放置矩形。我想知道这是否是最好的方法，或者是否有另一种更舒适的方法或最佳实践来做这些事情。

4

2 回答 2

3

您可以使用 html 图像映射：

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

或者简单地使用绝对定位将您的链接放在地图图像的顶部。

我可能会使用绝对定位方法，然后您可以将自定义样式的锚标记放置在需要它们的位置，并将红色 X 作为锚内的图像或作为锚上的背景图像。

于 2013-04-30T15:54:17.417 回答
1

这是在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/

于 2013-04-30T16:28:10.267 回答