請自備 下列圖檔
a1.jpg, a2.jpg, a3.jpg, a4.jpg
b1.jpg, b2.jpg, b3.jpg, b4.jpg
c1.jpg, c2.jpg, c3.jpg, c4.jpg
d1.jpg, d2.jpg, d3.jpg, d4.jpg
e1.jpg, e2.jpg, e3.jpg, e4.jpg
語法:
<html>
<head>
<meta http-equiv="Content-Language" content="zh-tw">
<meta http-equiv="Content-Type" content="text/html; charset=big5">
<title>01</title>
<script>
function ChangeImg(imgPath1, imgPath2, imgPath3, imgPath4) //更換圖檔
{
document.getElementById("Img1").src = imgPath1; //把第一個圖的路徑, 放進表格的第一張圖中, 進行換圖
document.getElementById("Img2").src = imgPath2; //把第一個圖的路徑, 放進表格的第一張圖中, 進行換圖
document.getElementById("Img3").src = imgPath3; //把第一個圖的路徑, 放進表格的第一張圖中, 進行換圖
document.getElementById("Img4").src = imgPath4; //把第一個圖的路徑, 放進表格的第一張圖中, 進行換圖
}
</script>
</head>
<body>
<table border="1" id="table1">
<tr>
<td><div onmouseover="ChangeImg('a1.jpg','a2.jpg','a3.jpg','a4.jpg')">01</div></td>
<td rowspan="5"><img id="Img1" width="150" height="150" border="0"></td>
<td rowspan="5"><img id="Img2" width="150" height="150" border="0"></td>
<td rowspan="5"><img id="Img3" width="150" height="150" border="0"></td>
<td rowspan="5"><img id="Img4" width="150" height="150" border="0"></td>
</tr>
<tr>
<td><div onmouseover="ChangeImg('b1.jpg','b2.jpg','b3.jpg','b4.jpg')">02</div></td>
</tr>
<tr>
<td><div onmouseover="ChangeImg('c1.jpg','c2.jpg','c3.jpg','c4.jpg')">03</div></td>
</tr>
<tr>
<td><div onmouseover="ChangeImg('d1.jpg','d2.jpg','d3.jpg','d4.jpg')">04</div></td>
</tr>
<tr>
<td><div onmouseover="ChangeImg('e1.jpg','e2.jpg','e3.jpg','e4.jpg')">05</div></td>
</tr>
</table>
</body>
</html>