ecshop商品展示页面鼠标滑过小图显示大图 ecshop教程 - ecshop - 爱建站

,,cms教程,ecshop教程,,

SEO SEO

首页  >   ecshop > 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>之间


关于如何使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模板 频道看看,相信一定有你喜欢的!


ecshop商品展示页面鼠标滑过小图显示大图 ecshop教程
http://www.yuedudg.cn/article/1181031.html

 

友情链接
ecshop经验网 织梦之家 cms综合网
phpcms之家 帝国cms常识 discuz经验网
zblog之家 wp之家


Tags: cms教程 ecshop教程


手机浏览本文

ecshop商品展示页面鼠标滑过小图显示大图  ecshop教程

ecshop商品展示页面鼠标滑过小图显示大图 ecshop教程

站内推荐

网站分类

标签列表

关于我们
文章内容来源互联网仅供参考,如果还有疑问请联系我们!我们将竭力帮您解决您的问题
联系我们:

QQ: 397423577 

email:397423577@qq.com

微信:ganenboy