ecshop如何实现鼠标滑过小图切换大图功能
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
好了相信大家都已经学会了，那就快快动手测试一下吧。
更多相关文章
- 我无法理解为什么我的代码中的单击选择文本
- js字符串与html代码互相转换时怪想法:自己解析js字符串成普通字
- 解决FCKEditor编辑器在浏览器返回时显示html源代码的问题
- 高分求：如何解析IdHTTP获得的http代码？用mshttp的IHTMLDocument2可
- 韩顺平_轻松搞定网页设计(html+css+javascript)_第19讲_js运行原
- HTML显示日期时间代码 - [js 特效代码]
- 解决html代码中插入的图片在浏览器中不显示的办法
- HTML代码格式化工具
- j2ee的web项目，有最终的html代码（即f12看到的最终给用户浏览器展示