新闻中心

Ecshop怎么才能实现鼠标滑过（不用双击）图片自动切换为大图

作者 / 无忧主机时间 2014-09-04 18:39:56

经常网购的朋友们都知道淘宝上面的宝贝都是有原图和缩略图的，并且都是从各个角度去拍摄的，当鼠标滑过原图的时候就会出现三个比原图还要大的宝贝图像，不经意的一看还以为是用放大镜放大一样，可以清楚的看到宝贝的详细图像，这样也方便需要购买的客户去验证商品的质量，小编的一位站长朋友是使用开源程序Ecshop搭建的仿淘宝商城，由于很多图片都是放上去了，但是看上去不是很形象，当客户想看看大图的时候都看不到，这样对客户的体验度很是不友好，为了实现这个功能，于是就找到了无忧主机小编我。经过小编查看了淘宝的那个鼠标滑过就可以从小图切换为大图的实现原理也找到了解决的思路，经过半个小时果然实现了。小编在这里分享下解决方案。首先小编把这个截图分享下如下： [caption id="attachment_16407" align="alignnone" width="282"] ecshop[/caption] 第一步：先找到目录文件下的goods.dwt 使用编辑软件打开。在<head></head>之间。添加以下代码:

<script type="text/javascript">
function change_img(img_src)
{
document.getElementsByName("goods_img")[0].src=img_src;
}
</script>

第二步：找到以下代码： <img src="{$goods.goods_img}"alt="{$goods.goods_name|escape:html}" > 在"{$goods.goods_name|escape:html}"代码的后面加上下面一行代码： name="goods_img" width="250" height="250"/> 第三步：找到文件使用编辑软件打开goods_gallery.lbi。找到以下代码：

<!-- {foreach from=$pictures item=picture}-->
<li><a href="gallery.php?id={$id}&img={$picture.img_id}"target="_blank"><img src="{if$picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}"alt="{$goods.goods_name}" class="B_blue" /></a>
</li>
<!--{/foreach}-->

然后在class="B_blue"后面加上下面一行代码：

onmouseOver="change_img(this.src)" />

以上三个步骤完全修改后，然后登陆下网站的后台点击下更新下缓存。更新完毕后就可以访问网站的首页了，点击购买对应的商品后然后鼠标在上面滑过就可以清楚的看到大图出现了。感谢各位站长对小编的支持，如果设置过过程中遇到问题的站长们也可以来咨询小编哦。小编QQ：340555009 340555005 340555017 无忧主机相关文章推荐阅读： ECSHOP如何赋予新注册会员VIP等级 ECSHOP商业版权POWERED BY ECSHOP 修改大全 ECSHOP去版权_删除ECSHOP底部版权信息的方法

本文地址：https://www.51php.com/ecshop/16405.html

上一篇: WordPress实现和人人网文章同步方法
下一篇: Discuz频道和版块的区别介绍