關(guān)于如何使ecshop網(wǎng)店里商品圖片在能多現(xiàn)實的前提下又不影響客戶查看呢?這就需要鼠標經(jīng)過圖片就能切換為大圖的功能,具體如何操作呢?鼠標滑過小圖顯示大圖的代碼如下:
先打開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)" />
保存,運行即可。
經(jīng)過上面的測試,鼠標滑過小圖,在上面的圖片顯示位置顯示的還是小圖,原因在于:onmouseOver=”change_img(this.src)”,這段代碼的意思是在上面的圖片顯示區(qū)顯示當前的圖片地址,this.src,而當前的圖片地址正好是小圖,解決方法:
將上面提到的:<img src="{if $picture.thumb_url}{$picture.thumb_url}{else}{$picture.img_url}{/if}"
修改為:<img src="{$picture.img_url}"
OK!
問題解決!
新聞熱點
疑難解答
圖片精選