這個例子可以幫助你更了解 onMouseOver 和 onMouseOut 兩個指令的進階用法。 這個程式跟我在 JAVA程式庫裡面介紹的 "圖案變化按鈕" 很像。 或是我應該說更簡單容易。
再次提醒一下, 在這段語法裡面不需要 <SCRIPT> 和 </SCRIPT> 兩個標籤。 onMouseOver 和 onMouseOut 兩個指令是用在 <A HREF> 的HTMl標籤裡面。 放的位置就像是在 <IMG SRC> 標籤裡面放 BORDER="0" 一樣。 先讓我們來看看這個小程式。
Variables 扮演了重要的角色. 趕快繼續看 Variable 的介紹吧!
STEP1:【程式範例】
- 以下是這個範例的程式碼:
<A HREF="http://come.to/Joseph2001"
onMouseOver="document.pic1.src='p1on.jpg'"
onMouseOut="document.pic1.src='p1off.jpg'">
<IMG SRC="p1off.jpg" BORDER=0 NAME="pic1">
</a>
- 右邊是執行結果: 執行結果按一下這裡去看
STEP2:【程式說明】
<A HREF="http://come.to/Joseph2001"
onMouseOver="document.pic1.src='p1on.jpg'"
onMouseOut="document.pic1.src='p1off.jpg'">
<IMG SRC="p1off.jpg" BORDER=0 NAME="pic1">
</a>
從我們之前說的指令介紹, 你應該能分出在聯結標籤中哪個式指令吧。 當你把滑鼠移開圖片時, 叫做
"p1off.jpg" 的圖案就會出現。 當你把滑鼠移動到圖片上時, 叫做 "p1on.jpg" 的圖案就會出現。
有沒有注意到, IMG 這個標籤是連到在 HREF 標籤裡面 onMouse 這個指令上的。 連接是經由 NAME="pic1" 來
做出來的. 你們將必須馬兩個標籤連在一起。
結論是這樣的:
onMouseOver 和 onMouseOut 兩個都是非常敏感的。 大小寫一定要非常注意。
因為 onMouseOver= 和 onMouseOut= 兩個都需要雙引號來括住裡面的指令, 所以裡面.jpg一定要用
單引號來括起來。
看到 document.pic1.src 這段有沒有想到前幾單元的內容呢? (JavaScript的等級介紹)
"Document" 指的是在 HTML 文件裡面的一個元件(object)。 "pic1" 是我隨便跟那個 object 取的名字。
"src" 是用來呼叫圖檔用的。
在這個例子裡面, onMouseOver 指令把圖片的路徑轉到 'p1on.jpg'。
onMouseOut 指令使整個圖片又變回原來的 'p1off.jpg'。
當然, 最後要注意的就是圖片的大小最好一樣。
去對照我介紹的程式, 看看哪裡不一樣...哪個比較好呢? 看你囉!