首先感謝“楊中科”老師，免費釋出教學視訊；
老規矩，先上傳圖檔素材；一共六張圖檔，三大，三小（大的圖檔大家可以把他下載下傳下來，當成手機屏保哦，由于圖檔太大，我隻讓他顯示200*300了
）。
小圖檔都是通過document.createElement("img") 建立的html标簽
圖檔上傳完了，下面就該是代碼了，代碼裡都有注釋，是以在這裡我就不白話了；直接看注釋就OK了；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>點小圖看大圖</title>
<style type="text/css">
.imgStyle
{
margin: 10px;
padding: 2px;
border: 1px solid #000;
}
</style>
<script language="javascript" type="text/javascript">
var data = { "Images/01_small.jpg": ["Images/01.jpg", "圖檔1"], "Images/02_small.jpg": ["Images/02.jpg", "圖檔2"], "Images/03_small.jpg": ["Images/03.jpg", "圖檔3"] }; //Key:Value;
function LoadImg() {
//遍例小圖（Key）位址；
for (var smallImgPath in data) {
//動态建立一個img标簽
var smallImg = document.createElement("img");
//動态添加Css樣式；imgStyle為樣式的類名；
smallImg.className = "imgStyle";
//給建立後的img指派；（圖檔路徑）
smallImg.src = smallImgPath;
//通過setAttribute改變大圖檔的(相對)路徑;如果不這麼寫下面取到的會是絕對路徑；
smallImg.setAttribute("a1", data[smallImgPath][0]);
smallImg.setAttribute("a2", data[smallImgPath][1]);
smallImg.onmousemove = function () {
//取大圖檔的位址；
document.getElementById("bigImg").src = this.getAttribute("a1");
//取大圖檔的标題；
document.getElementById("imgTitle").innerHTML = this.getAttribute("a2");
//擷取隐藏的層的id；
var showDiv = document.getElementById("showDiv");
//讓顯示的層的位置等于滑鼠的位置；
showDiv.style.top = window.event.clientY;
showDiv.style.left = window.event.clientX + 100;
//顯示層；
showDiv.style.display = "block";
}
smallImg.onmouseout = function () {
showDiv.style.display = "none";
//加載到body中；
document.body.appendChild(smallImg);
}
</script>
</head>
<body onload="LoadImg()">
<div id="showDiv" style="display: none; position: absolute;">
<img id="bigImg" src="" width="20%" height="20%" alt="" />
<p id="imgTitle">
</p>
</div>
</body>
</html>