图像映射中的 jQuery 弹出窗口答案

【问题标题】：jQuery popups within an image map图像映射中的 jQuery 弹出窗口
【发布时间】：2015-11-11 21:12:27
【问题描述】：

我想构建一个图像映射并根据单击的图像映射区域调用 jQuery 弹出窗口。这个可以吗？

类似于本教程的内容，除了 href 将调用 jQuery 弹出窗口 =“#MyPopupName”。 HTML <area> href Attribute Example

这是我到目前为止所拥有的（不起作用）：

<div data-role="content" class="ui-content" data-theme="a">
    <p>Hello, this is the CONTINENTS navigation page.</p>

    <a href="#Popup_NAmerica" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Click for N America</a>
    <p><img src="Assets/images/World_Map_1930_Continents.png" width="1024" height="553" alt="Continents Map" usemap="imgmap_continents" /> </p>

    <!-- href map -->
    <map name="imgmap_continents">
        <area shape="rect" coords="12,38,279,270" href="#Popup_NAmerica" /> <!--N America popoup -->
        <area shape="rect" coords="126,289,327,548" href="#Popup_SAmerica" /> <!--S America popup -->
        <area shape="rect" coords="849,371,1007,498" href="#Popup_SAmerica" /> <!--Australia popup -->
        <area shape="poly" coords="379,176,564,180,643,294,641,468,481,471,473,330,389,318,423,420" href="#Popup_Africa" /> <!--Africa popup -->
        <!-- Europe, Asia, Antartica go here -->
    </map>


    <!-- POPUPS -->

    <div data-role="popup" id="Popup_NAmerica" class="ui-content">
        <h3>North America</h3>
        <p>This is where there will be both an <strong>ON</strong> and <strong>OFF</strong> button for this country.</p>
    </div>
    <div data-role="popup" id="Popup_SAmerica" class="ui-content">
        <h3>South America</h3>
        <p>This is where there will be both an <strong>ON</strong> and <strong>OFF</strong> button for this country.</p>
    </div>
    <div data-role="popup" id="Popup_Australia" class="ui-content">
        <h3>Australia</h3>
        <p>This is where there will be both an <strong>ON</strong> and <strong>OFF</strong> button for this country.</p>
    </div>
    <div data-role="popup" id="Popup_Africa" class="ui-content">
        <h3>Africa</h3>
        <p>This is where there will be both an <strong>ON</strong> and <strong>OFF</strong> button for this country.</p>
    </div>
    <!-- Europe, Asia, Antartica go here -->
    <!-- /POPUPS -->
</div>

这是一个 jsfiddle：https://jsfiddle.net/a0wnvuxk/

【问题讨论】：

欢迎来到 SO！与您的预期行为相比，值得详细说明哪些不完全有效。一个非常好的做法是在线重现问题（例如在jsfiddle 上），以便人们可以直接修改您的代码并为您提供有效的解决方案。
这里是 jsfiddle：jsfiddle.net/a0wnvuxk
可以使用Jquery qTip2：qtip2.com/demos

标签： javascript jquery html popup imagemap

【解决方案1】：

您的 usemap 属性不正确：地图名称前缺少哈希 #。

然后似乎 jQuery Mobile 仅在 a 链接上自动附加弹出打开功能，而不是在 area 上。因此，您必须自己创建一个事件侦听器：

$("area", "map[name='imgmap_continents']").click(function (event) {
    event.preventDefault();

    var href = $(this).attr("href");

    // See jQuery Mobile Popup API
    // https://demos.jquerymobile.com/1.2.0/docs/pages/popup/

    // Use the following instruction to open the popup where it is defined.
    //$(href).popup("open");

    // Use the following instruction to emulate a click on the button
    // that opens the popup. This will open the popup on top of that
    // button instead of where it is defined.
    $("a[href='" + href + "']").click();

});

演示：https://jsfiddle.net/a0wnvuxk/9/

【讨论】：