Question

我有一张美国的自定义地图，有大约20个多边形热点。我希望在悬停时每个热点旁边都会弹出一个框，其中包含从我的数据库特定的位置绘制的文本和链接。我本以为这是一种常见的情况，但我找不到有效的解决方案。我尝试使用asp：imagemap和ajax popup extender，但是你不能为热点分配ID，也不支持鼠标悬停事件。我尝试使用html图像映射的CSS，但我无法弄清楚如何使用带有多边形热点的css解决方案，我也不知道如何链接它以从没有asp目标的数据库中获取数据（我是不太熟悉jquery，哪个会工作，我猜）。有人知道任何简单的解决方案吗？

Answer 1

我不明白为什么这与在任何其他上下文中创建弹出窗口有什么不同。将“数据”附加到area元素有多种方法。我能想到的最简单的方法是使用alt属性。

例如，查看this demo。（以下代码。）

<强> HTML

<body>
<p>Hover on the sun or on one of the planets to get its info:</p>
<div id="map">
    <div id="overlay"></div>
    <img src="http://www.w3schools.com/TAGS/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
</div>
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="http://www.w3schools.com/TAGS/sun.htm" />
    <area shape="circle" coords="90,58,3" alt="Mercury" href="http://www.w3schools.com/TAGS/mercur.htm" />
    <area shape="circle" coords="124,58,8" alt="Venus" href="http://www.w3schools.com/TAGS/venus.htm" />
</map>
</body>

<强> JS

$('area').each(function(){
    var area = $(this),
        alt = area.attr('alt');
    area.mouseenter(function(){
        $('#overlay').html(alt);
    }).mouseleave(function(){
        $('#overlay').html('');
    });
});

<强> CSS

#map {
    position: relative;
}
#overlay {
    position: absolute;
    background: #000;
    color: #fff;
    top: 20px;
    left: 20px;
}

没有AJAX调用，但可以轻松地将这些调用添加到每个mouseenter元素的mouseleave和area事件中。

Answer 2

这需要一个javascript解决方案（当然在服务器端提供数据）。你见过Using JQuery hover with HTML image map还没让你入门吗？

事实上，提供的答案提供了http://plugins.jquery.com/project/maphilight的链接和http://davidlynch.org/js/maphilight/docs/demo_usa.html的演示。这不是你想要的，但它很接近。

我很乐意指出如何最好地将服务器端数据与客户端地图突出显示集成，但需要更多信息。

翻转图像地图弹出窗口，弹出文本从数据库中绘制

2 个答案: