图像映射上的信息窗口(Javascript)

Question

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

下面是我的代码：

<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>

Answer 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>

​