图像地图在翻转时弹出，弹出文本从数据库中提取
Posted
技术标签:
【中文标题】图像地图在翻转时弹出，弹出文本从数据库中提取【英文标题】：Image map popup on rollover, with popup text drawn from database 【发布时间】：2011-02-18 21:39:26 【问题描述】：我有一张美国的自定义地图，其中包含大约 20 个多边形热点。我希望在悬停时在每个热点旁边弹出一个框，其中包含从我的数据库中特定于该位置的文本和链接。我原以为这是一种常见情况，但我找不到有效的解决方案。我尝试使用 asp:imagemap 和 ajax 弹出扩展器，但您不能为热点分配 ID，并且它不支持鼠标悬停事件。我尝试使用带有 html 图像映射的 css，但我不知道如何使用带有多边形热点的 css 解决方案，而且我也不知道如何链接它以从没有 asp 目标的数据库中获取数据（我是我猜对jquery不太熟悉，这会起作用）。有人知道那里有任何简单的解决方案吗？
【问题讨论】：
我需要的弹出框功能类型的最佳示例是谷歌地图，弹出框保持打开状态，以便用户可以导航到其中的链接。我愿意放弃悬停功能并满足于硬点击。事实上，我本来想简单地使用谷歌地图，但设计师坚持使用自定义地图图形。 【参考方案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" usemap="#planetmap" />
</div>
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="http://www.w3schools.com/TAGS/sun.htm" />
<area shape="circle" coords="90,58,3" href="http://www.w3schools.com/TAGS/mercur.htm" />
<area shape="circle" coords="124,58,8" 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 调用，但可以轻松地将这些调用添加到每个 area 元素的 mouseenter 和 mouseleave 事件中。
【讨论】：
嗨，你将如何使用这种方法强制弹出窗口悬停在实际热点旁边，而不是在某个固定位置，而不必为每个热点创建一个 div（我也有很多是为了对它们进行硬编码是实用的）？ 此外，当您将鼠标悬停在它以及热点上时，弹出框需要保持打开状态，以便用户可以点击其中的 http 链接（如 Google 地图）。基本上，我想要一些与谷歌地图上的弹出功能非常相似的东西。【参考方案2】：这需要一个 javascript 解决方案（当然要在服务器端提供数据）。你见过Using JQuery hover with HTML image map 还没开始吗？
事实上，提供的答案提供了http://plugins.jquery.com/project/maphilight 的链接和http://davidlynch.org/js/maphilight/docs/demo_usa.html 的演示。这不是您想要的，但很接近。
我很乐意指出如何最好地将您的服务器端数据与您的客户端地图突出显示集成，但需要更多信息。
【讨论】：
嗨，是的，我查看了该线程和 Map Hilight 演示，但它似乎不适用，因为我不想突出显示，并且弹出框仅用于少量静态数据，而不是从数据库中提取的多个段落。基本上，当您将鼠标悬停在图像地图热点上时，我希望出现一个弹出框，并且在该弹出框内将包含大约 5-10 段的地址和该特定区域的链接。为简单起见，我将美国地图分成多个州区域（东北等）。这一切都在一个 aspx 页面上。 MapHilight 的主要问题是悬停时弹出窗口不会保持打开状态，因此我无法在其中使用链接。以上是关于图像地图在翻转时弹出，弹出文本从数据库中提取的主要内容，如果未能解决你的问题，请参考以下文章