关于如何使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="360" height="360"/>
最后打开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)" />
这样就实现了商品相册鼠标滑过小图显示大图的功能,但此时,鼠标滑过小图时,大图可能会是模糊的,这是因为图片路径src="{if $picture.thumb_url}{$picture.thumb_url} 中显示图片的值是thumb_url,这个值是缩略图,此时只需将thumb_url改为goods_img即可。