javascript 滑鼠懸浮圖片顯示原圖 移出滑鼠後原圖消失（多圖）

具體用法是這樣的：
將Javascript代碼放到</body>前（將指令碼代碼放在頁面底端有助於提高頁面速度，但是我現在還沒有切身的體會） 複製代碼 代碼如下:<script language=JavaScript>
function mouseOutPic() //當滑鼠移出時，隱藏原圖
{
if(window.event.toElement.id!="img000") bigPic.style.visibility = "hidden";
//如果滑鼠不在img000上的話，將這個地區隱藏
}
function mouseOverPic(imgSrc) //當滑鼠移上小圖時，顯示原圖
{
var seeBig = document.getElementById("bigPic"); //得到將要顯示原圖地區的div element
var newImg = document.createElement("img"); //建立一個img element，將原圖的src賦給這個element
newImg = "<img src=\'" + imgSrc + "\'/>"; //注意這裡，是為整個element賦值，我在這個小問題上還花了挺多時間
//alert(imgSrc);
seeBig.innerHTML = newImg; //將原圖賦給要顯示的地區
}
</script>

下面是HTML代碼： 複製代碼 代碼如下:<!--下面這個ID是img000的element是略縮圖，滑鼠移至上方在它上面即出現原圖-->
<!--onmouseover方法中調用了mouseOverPic函數（見上面），傳給它的參數是原圖的URL-->
<!--調用mouseOverPic之後，將原圖顯示地區設為可見-->
<img id="img000" src="images/general/emailAt.jpg" onmouseover="mouseOverPic('images/general/usc_badge.jpg'); bigPic.style.visibility='visible'" onmouseout="mouseOutPic()">
<!--頁面初始化的時候，原圖顯示地區是隱藏的-->
<div id="bigPic" style="visibility:hidden;">
</div>

上面這個代碼沒有控制原圖出現的位置，如果涉及到靠近視窗邊緣的位置的話會用到offsetLeft等屬性。
仔細想想，其實這個也蠻簡單的。寫Javascript的需要多多注意細節，這個實在是太重要了，一不小心就會出錯，最糟糕的是不知道錯在哪裡。