イメージ マップを含むイメージがある単純なアプリケーションを作成しています。イメージ マップをクリックすると、別のページが読み込まれます。タグで href プロパティを使用して、新しいページに移動しています。これらすべてが 1 つのページで行われます。
画像マップをクリックすると、トランジションはスムーズで、2 番目のページが読み込まれるはずです (これが自然な動作です)。 、画面に何も表示されず、画面を数回タップした後にのみ要素が表示されます。
解決策を探してみましたが、何も見つかりませんでした。
私が作成した以前のアプリケーションでは、このような問題はまったく発生しませんでしたが、2 番目のアプリケーションで突然この問題が発生しました。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>India Stats</title>
<link href="css/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="listPage" data-role="page">
<div data-role="header" data-position="fixed">
Geo-spatial Analysis of Election Results in India
</div>
<div data-role="content">
<div>
<img id="Image-Maps_8201304300944558" src="img/indiamap.png" usemap="#Image-Maps_8201304300944558" />
<map id="_Image-Maps_8201304300944558" name="Image-Maps_8201304300944558">
<area shape="poly" coords="60,255,78,258,94,262,106,281,120,294,124,301,117,304,117,313,110,317,108,325,108,334,106,343,99,343,97,351,87,347,88,338,86,329,85,319,85,311,81,305,79,315,78,324,68,329,54,337,46,337,43,333,33,325,29,316,21,310,20,303,17,299,28,298,36,296,43,293,43,288,34,288,25,290,17,285,14,279,14,272,14,265,23,258,36,262,45,262,50,258,58,263," href="#gujarat" />
</map>
</div>
</div>
<div data-role="footer" data-position="fixed">
Datanet Analytics © Datanet India Pvt. Ltd.
</div>
</div>
<div id="gujarat" data-role="page">
<div data-role="header" data-position="fixed">
Geo-spatial Analysis of Election Results in Gujarat
</div>
<div data-role="content">
<div>
<img id="ImageMap" src="img/gujarat.png" usemap="#ImageMaps"/>
<map id="ImageMaps" name="ImageMaps">
<area shape="poly" coords="225,348,224,337,219,332,219,328,212,324,204,319,197,317,191,314,193,310,201,306,199,300,202,295,198,291,194,287,196,283,195,277,187,275,182,275,177,275,165,274,158,274,158,278,158,285,163,297,169,309,171,317,158,316,150,313,145,313,139,313,134,316,134,320,141,328,149,336,156,342,165,345,178,352,187,356,195,356,206,354,212,354,223,351" href="#junagadh">
</map>
</div>
</div>
<div data-role="footer" data-position="fixed">
Datanet Analytics © Datanet India Pvt. Ltd.
</div>
</div>
<div id="junagadh" data-role="page">
<div data-role="header" data-position="fixed">
Geo-spatial Analysis of Election Results in Junagadh PC 2009 & ACs 2012
</div>
<div data-role="content">
<img src="img/junagadh.png" />
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li style="font-size:30px"><a href="election.html">Analysis of Election Results</a></li>
<li style="font-size:30px"><a href="cr.html">Constituencies Result of Previous Years</a></li>
</ul>
</div>
Datanet Analytics © Datanet India Pvt. Ltd.
</div>
</div>
</body>
<script src="cordova-2.7.0.js" type="text/javascript"></script>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.0.js" type="text/javascript"></script>
</html>