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

＆＃13;

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

＆＃13;

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

＆＃13;

并使用jquery：

＆＃13;

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

＆＃13;

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

＆＃13;

Infowindow在图像映射（Javascript）

1 个答案: