jQuery всплывающие окна в картинке

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/