下面這個用來做最簡單的切換圖片效果，可以用來做產品展示之類的效果

<script>
function showDaTu(src){document.getElementById("defaultImg").src=src;}
</script>
<img src="a.jpg" id="defaultImg">
<br><br>
<img src='b.jpg' onmouseover="showDaTu('c.jpg')">
<img src='d.jpg' onmouseover="showDaTu('e.jpg')">
<img src='f.jpg' onmouseover="showDaTu('g.jpg')">
<img src='h.jpg' onmouseover="showDaTu('i.jpg')">
<br>
因圖片較大，請等待圖片加載完成……然后鼠標放小圖上就會切換了。

鼠標移到圖片上會變成另一張圖

<img src="1.jpg" onmouseover="this.src='2.jpg'" onmouseout="this.src='1.jpg'">
但此法有個問題：假設第二張圖片比較大, 那你這個mouseover 用戶要等N久才能看到新的圖片, 因為在客戶端沒有這張圖片的緩存, 客戶端必須重新發一次請求到服務器端取這張圖片。不過可以使用另一種簡單的蠢辦法，就是加一個0高度的DIV，把 2.jpg放進去，刷新頁面時就會加載這張圖了。<div style="height:0; overflow:hidden;"><img src="2.jpg" /></div>