今天BTV导航网的小编为你讲一下ecshop商品展示页面鼠标滑过小图显示大图相关的内容。
关于如何使ecshop网店里商品图片在能多现实的前提下又不影响客户查看呢？这就需要鼠标经过图片就能切换为大图的功能，具体如何操作呢？鼠标滑过小图显示大图的代码如下：
先打开goods.dwt
添加代码:
<script type="text/javascript">
function change_img(img_src)
{
document.getElementsByName(“goods_img”)[0].src=img_src;
}
</script>
在<head></head>之间。
然后找到代码：
<img src="{$goods.goods_img}" alt="{$goods.goods_name|escape:html}" >
在”{$goods.goods_name|escape:html}”代码的后面加上：
name="goods_img"
最后打开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}" /></a>
</li>
<!–{/foreach}–>
在class="B_blue"后面加上：
onmouseOver="change_img(this.src)" />
保存，运行即可。
经过上面的测试，鼠标滑过小图，在上面的图片显示位置显示的还是小图，原因在于：onmouseOver=”change_img(this.src)”，这段代码的意思是在上面的图片显示区显示当前的图片地址，this.src，而当前的图片地址正好是小图，解决方法：
将上面提到的：<img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}"
修改为：<img src="{$picture.img_url}"
OK！
问题解决！
|
通过对ecshop商品展示页面鼠标滑过小图显示大图的详细介绍，希望对你有所帮助，我们提供了更多和ecshop商品展示页面鼠标滑过小图显示大图类似的相关内容推荐，可以你更全面的帮助你解决问题。我们BTV85网址导航还提供网址收录服务，你可以注册提交你的网站信息，帮你引导搜索引擎蜘蛛，同时还有网站SEO优化交流微信群，里面很多SEO高手和大咖，加友链，可以免费进群。
