2

Web サイトにプラットフォーム virb.com を使用していますが、クリック可能な画像を iPhone および Android モバイル デバイスで動作させるのに問題があります。一部のリンクは時々機能し、その後まったく機能しません。これは、サイトの 2 つのページに影響します。クリック可能な画像用に作成したページ リンクと HTML コードを次に示します。

http://stonewalters.com/world-keeps-turning

<div align="left"><img src="http://dl.dropbox.com/u/31856944/Virb/Splash_Title.png" target="_blank" title="World Keeps Turning - New Single" />
<div><img src="http://dl.dropbox.com/u/31856944/Virb/splash_body-2.jpg" usemap="#Map" height="391px" width="620px" /><map name="Map" id="Map">
<area shape="rect" coords="373,351,616,388" href="http://stonewalters.com/download-to-unlock" target="_blank" title="Download to unlock new music from Stone!" />
</map>
</div>

<div><img src="http://dl.dropbox.com/u/31856944/Virb/splash_share-2.png" usemap="#Map 2" height="31px" width="620px" /><map name="Map" id="Map 2">
<area shape="rect" coords="306,0,457,29" <a class="labs_facebook" href="http://api.awe.sm/url/share?channel=facebook&v=2&key=67967a8b27d8923cccd8531514f22fdac3921f86162e7c45708a0fefa509faab&tool=w80Xzb&url=http%3A%2F%2Flabs.topspin.net%2Flinkbuilder%2Fconfirm.php%3Fsessionid%3D72a01b48b5198ffc16827b270b8586b4%26fb%3D2&campaign=stonewalters-worldkeepsturning-72a01b48b5198ffc16827b270b8586b4" target="_blank" title="Share on Facebook" /></a>
<area shape="rect" coords="462,0,613,29" <a class="labs_twitter" href="http://api.awe.sm/url/share?channel=twitter&v=2&key=67967a8b27d8923cccd8531514f22fdac3921f86162e7c45708a0fefa509faab&tool=w80Xzb&url=http%3A%2F%2Flabs.topspin.net%2Flinkbuilder%2Fconfirm.php%3Fsessionid%3D72a01b48b5198ffc16827b270b8586b4%26fb%3D2&destination=http://twitter.com/share?text=Check+out+Stone%27s+latest+song+%27World+Keeps+Turning%27+and+get+a+free+download+of+it+now%21+ -%26url=AWESM_TARGET%26via=StoneWalters&campaign=stonewalters-worldkeepsturning-72a01b48b5198ffc16827b270b8586b4" target="_blank" title="Share on Twitter" /></a>
</map>
</div>

http://stonewalters.com/download-to-unlock

<div align="center"><img src= "http://dl.dropbox.com/u/31856944/Virb/body_download-to-unlock-top-610.png" width="610px" height="252px" usemap="#Map"/></a>
<br>
<br>
</div>
<div align="center">
<script type="text/javascript" src="http://cdn.topspin.net/javascripts/topspin_core.js?aId=1336&timestamp=1341070107"></script><div class="topspin-widget topspin-widget-email-for-media"><object type="application/x-shockwave-flash" width="300" height="80" id="TSWidget153863" data="http://cdn.topspin.net/widgets/email2/swf/TSEmailMediaWidget.swf?timestamp=1341070107" bgColor="#000000">  <param value="always" name="allowScriptAccess" />  <param name="allowfullscreen" value="true" />  <param name="quality" value="high" />  <param name="movie" value="http://cdn.topspin.net/widgets/email2/swf/TSEmailMediaWidget.swf?timestamp=1341070107" />  <param name="flashvars" value="widget_id=http://cdn.topspin.net/api/v1/artist/1336/email_for_media/153863?timestamp=1341070107&amp;theme=white&amp;highlightColor=0x000000" /></object></div>
<div align="center"><img src="http://dl.dropbox.com/u/31856944/Virb/body_download-to-unlock-bottom-610.png" width="610px" height="417px" usemap="#Map 2" /></div>
<map name="Map" id="Map">
<area shape="rect" coords="138,25,474,49" href="http://www.stonewalters.com/download-to-unlock" title="Download to unlock music & join Stone's Inner Circle"/>
</map>
<map name="Map" id="Map 2">
<area shape="rect" coords="500,0,608,30" href="http://www.stonewalters.com/world-keeps-turning" title="World Keeps Turning - New Single"/>
<area shape="rect" coords="228,321,396,368" href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=SIC_WKT&cl=217252&ejc=2" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);" target="_blank" title="Join Stone's Inner Circle"/>
<area shape="rect" coords="500,386,608,416" href="http://www.stonewalters.com/world-keeps-turning" title="World Keeps Turning - New Single"/>
</map>
</div>

上記のコードは、PC または MAC でサイトを表示するときに機能するため、問題の原因がわかりません。他に何をすべきかわからないので、提案やコメントをいただければ幸いです。ありがとう！

ここにコードを配置すると、すぐ上のコードを使用します。

<map name="Map" id="Map 2" style="cursor:pointer">

このマップの各画像の座標は認識されません。画像全体 (3 つの座標を含む) が 1 つの大きなクリック可能な画像になります。

4

1 に答える 1

3

Mobile Safari は、リンクやボタンなど、明らかにタッチ可能なものに対してタッチ イベントを渡します。<img>ただし、Javascript を使用して、またはタグなどの他の html 要素にタッチ イベントを追加している場合は、<div>スタイルを設定することで、タッチ可能であることを Safari に知らせることができます。

cursor:pointer;

要素または要素の css クラスで。

ファイルの 1 つに css クラスを追加できる場合は、head セクションで次のようにすることができます。

<script>
    .mobil-click-element {
        pointer:cursor;
    }
</script>

 // Then put the class on the element you want to be clickable
 <div class="mobil-click-element">some other html</div>

CSSを編集できない場合は、スタイルを要素に直接配置できます

 <img style="cursor:pointer" ... />
于 2012-07-01T13:44:44.230 に答える