Infowindow在圖像映射(Javascript)

[英]Infowindow on a Image Map (Javascript)


I want to display a infowindow on image map when I click on the link .

當我點擊鏈接時,我想在圖像地圖上顯示一個信息窗口。

here is my code :

這是我的代碼:

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

1 个解决方案

#1


0  

You can show info window (assuming you mean alert) like this (without jQuery):

您可以像這樣顯示信息窗口(假設您的意思是警報)(沒有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>

and using jquery:

並使用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>


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/09/26/6f9702e15e5d9bac52d1cedfdab463d8.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com