I am using phonegap and jquery mobile for an ios app.
I now run into aproblem using image maps and the back button.
My code looks like that:
<img id="lagewanderwege" src="images/Lichtenstein/um_Lichtenstein.gif" alt="" title="Sehenswürdikeiten um Lichtenstein" onclick="toggleLageImage();" usemap="#LandkarteLichtenstein">
<map name="LandkarteLichtenstein">
<area style="cursor: pointer" shape="rect" coords="186,97,203,128" data-transition="slide" onClick="location='#div_Lichtenstein_1';" alt="Burgruine Lichtenstein" title="Burgruine Lichtenstein" />
</map>
<div id="div_Lichtenstein_1" data-role="page" data-add-back-btn="true">
<div data-role="header">
..
</div>
<div id="div_Lichtenstein" data-role="page" data-add-back-btn="true" onmouseover="pauseAudio();">
<div data-role="header">
<h1 id="div_Lichtenstein_header">Archäologisch-historische Rundreise um die Burgruine Lichtenstein</h1>
</div>
<div id="div_video_lichtenstein" data-role="content">
<ul data-role="listview">
<li><a href="#div_Lichtenstein_1" data-transition="slide"><img src="images/Lichtenstein/po_ruine_head.jpg" alt="Burgruine Lichtenstein" class="ui-li-icon" /> 1 - Burgruine Lichtenstein</a></li>
...
</div>
If I click on the ul list view a link the back button is shown for the div_Lichtenstein_1 page.
But If I click on the map area onclick it does not display the back button for the div_Lichtenstein_1 page. Same happens when I directly use href= instead of onclick.
I assume jquery mobile does something special with the first a href click. I can see this when I first click on the list view a href item - back button exists. If I I next click on the map area link (same reference) the back button exists.
If I do it in the reverse order - first map area click, then a href click the back button does not exist.
Any idea what's wrong or what I need to modify?
Thanks for helping!