您的位置：首页 > 运维架构

ecshop如何实现鼠标滑过小图切换大图功能

2012-03-10 23:19 288 查看
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" 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)" />
演示代码成功http://www.ecshopdev.com

好了相信大家都已经学会了，那就快快动手测试一下吧。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航