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

回答

相关问题