Question

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

类似于本教程的内容，除了href将调用jQuery popup =“＃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/

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

jQuery在图像映射中弹出

1 个答案: