0

画像の入れ替えを行うために JavaScript を少し使用しています。

デスクトップ ブラウザでは問題なく動作しますが、モバイル デバイスや小型デバイスでは動作しません。

<p><img id="ima" src="images/web_assets/image1.jpg" width="270px" />
</p>
<p><a href="#" onmouseover="showT( 'images/web_assets/image1.jpg' )"><img src="images/web_assets/image1.jpg" width="84px" /></a>&nbsp;<a href="#" onmouseover="showT( 'images/web_assets/image2.jpg' )"><img src="images/web_assets/image2.jpg" width="84px" /></a>&nbsp;<a href="#" onmouseover="showT( 'images/web_assets/image3.jpg' )"><img src="images/web_assets/image3.jpg" width="84px" /></a>
</p>
<script type="text/javascript">
    // <![CDATA[
    function showT(image) {
        document.getElementById('ima').setAttribute('src', image)
    }
    // ]]>

</script>

これをすべてのデバイス（つまり、デスクトップ、iPad、iPhone、その他のモバイルデバイス）で機能させる方法はありますか?

新しいコード:

<p><img id="ima" src="images/web_assets/image1.jpg" width="270px" />
</p>
<p><a href="#" onClick="showT( 'images/web_assets/image1.jpg' )"><img src="images/web_assets/image1.jpg" width="84px" /></a>&nbsp;<a href="#" onClick="showT( 'images/web_assets/image2.jpg' )"><img src="images/web_assets/image2.jpg" width="84px" /></a>&nbsp;<a href="#" onClick="showT( 'images/web_assets/image3.jpg' )"><img src="images/web_assets/image3.jpg" width="84px" /></a>
</p>
<script type="text/javascript">
    // <![CDATA[
    function showT(image) {
        document.getElementById('ima').setAttribute('src', image)
    }
    // ]]>

</script>

しかし、クリックすると、ページがブラウザの上部に戻りますか?!?!

4

1 に答える 1

0

'onmouseover' イベントは、クロスデバイスで動作する何かを作成するための最良の選択ではありません。なぜなら、モバイルやタブレットにはマウスがないからです。

マウスレスデバイスのクリックイベントで動作させることを考えてみませんか?

于 2013-03-07T09:40:01.523 に答える