图像地图上的信息窗口 (Javascript)答案

【问题标题】：Infowindow on a Image Map (Javascript)图像地图上的信息窗口 (Javascript)
【发布时间】：2015-12-24 03:08:22
【问题描述】：

当我点击链接时，我想在图像地图上显示一个信息窗口。

这是我的代码：

<img src="[http://www.isdntek.com/tagbot/misc/bambi.jpg][1]" width="400" border="0" usemap="#imap_51" >
<map id="imap_51" name="imap_51" >
<area shape="rect" coords="27,47,135,135"  title="info1" href="">
<area shape="rect" coords="188,26,296,114"  title="info2" href="">
<area shape="rect" coords="116,140,224,228"  title="inf33" href="">
</map>

【问题讨论】：

标签： javascript jquery html infowindow imagemap

【解决方案1】：

您可以像这样（不带 jQuery）显示信息窗口（假设您的意思是警报）：

function showInfo(target) {
    // target is the clicked area element
    alert(target.title);
}

<img src="http://www.isdntek.com/tagbot/misc/bambi.jpg" width="400" usemap="#imap_51" />
<map id="imap_51" name="imap_51" >
    <area shape="rect" coords="27,47,135,135"  title="info1" onclick="return showInfo(this);" />
    <area shape="rect" coords="188,26,296,114"  title="info2" onclick="return showInfo(this);" />
    <area shape="rect" coords="116,140,224,228"  title="inf33" onclick="return showInfo(this);" />
</map>

并使用 jquery：

$(function() {
    // Get all area elements and assing click handler
    $("area").click(function(e) {
        e.preventDefault();
        // Show alert
        alert($(this).attr("title"));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="http://www.isdntek.com/tagbot/misc/bambi.jpg" width="400" usemap="#imap_51" />
<map id="imap_51" name="imap_51" >
    <area shape="rect" coords="27,47,135,135"  title="info1" />
    <area shape="rect" coords="188,26,296,114"  title="info2" />
    <area shape="rect" coords="116,140,224,228"  title="inf33" />
</map>

【讨论】：