Infowindow在圖像映射（Javascript）

[英]Infowindow on a Image Map (Javascript)

本文翻译自 UNO 查看原文 2015-09-26 70 infowindow/ imagemap/ html/ javascript/ jquery

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

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。

Javascript Image map on image from database Checking for InfoWindow size in google map Adding buttons to map infowindow android Creating custom infowindow in google map Button onclicklistener on infowindow in google map Google Map Infowindow not showing properly javascript - google map like image scrolling InfoWindow closing icon not showing in Google Map How to create multiple infowindow in google map api Google Map .InfoWindow Set Height and Width