RWD移動設備映像交換JavaScript

我正在使用一些JavaScript來執行映像交換。RWD移動設備映像交換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，iphones，其他移動設備）？

新代碼：

<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>

但的onclick，它射擊頁後退高達瀏覽器的頂部？！？！

來源

2013-03-07 user991830

'onmouseover'事件並不是真正使交叉設備工作的最佳選擇，因爲您在手機，平板電腦上沒有鼠標。

也許考慮讓它在無鼠標設備的點擊事件上工作？

來源

2013-03-07 09:40:01

謝謝...你有一個例子嗎？（不是真正的JS人） – user991830 2013-03-07 10:20:58

我已經更改爲onClick（如上所述），但是當點擊圖像時，它會交換圖像，但也會將頁面返回到瀏覽器的頂部 - 以任何方式阻止它？ – user991830 2013-03-07 10:33:45

解決了我自己的問題 - 需要拿走href =「＃」 – user991830 2013-03-07 11:43:20

RWD移動設備映像交換JavaScript

回答

相關問題