OnMouseOver and OnMouseOut 簡單教學

http://4fcooking.blogspot.com/
朋友問我上面這個部落格, 右欄有個漂亮的課程區塊,
是怎麼做出來的...
這個, 我研究了一下右側那一欄(right-click, view page source)...
得到的結果: 那個漂亮的部分, 是一個 flash...
flash...超出本人的能力範圍了...@@
不過, 若真要做成那個效果, 也不用用到FLASH,
只要提供圖案(每個連結2張圖), 就可以做到同樣效果了...
然後...就像上次貼紙教學一樣, 一樣的語法,
做出一張貼紙來。
所以, 先準備好需要的資料(以鄭清文在樂樂為例:),
A.網址(點進去之後要看到的畫面):
http://gallery.me.com/isgrace#100219
B:圖型, 2張, 一張為滑鼠移上去後, 看到的圖.
img1:
http://1.bp.blogspot.com/_pfYtts6VlQI/SdPLiObXoBI/AAAAAAAAAXM/5Ga7rUepJIA/s400/鄭清文在樂樂台北(20090412台灣文化地圖首場宣傳).jpg
img2:
http://3.bp.blogspot.com/_pfYtts6VlQI/SeK5JdH1WzI/AAAAAAAAAX8/PgJE_iMHpy8/s400/IMG_6018.jpg

好了, 像上次一樣把貼紙做出來:
<a href="http://gallery.me.com/isgrace#100219"><img src="http://1.bp.blogspot.com/_pfYtts6VlQI/SdPLiObXoBI/AAAAAAAAAXM/5Ga7rUepJIA/s400/鄭清文在樂樂台北(20090412台灣文化地圖首場宣傳).jpg" width="289" height="400"></a>



這樣做出來的貼紙, 是不會換圖的, 因此, 還要動一點手腳:
加上 onmouseover(滑鼠移上來時做的動作) 及onmouseout(滑鼠移開時做的動作) :
<a href="http://gallery.me.com/isgrace#100219"><img src="http://1.bp.blogspot.com/_pfYtts6VlQI/SdPLiObXoBI/AAAAAAAAAXM/5Ga7rUepJIA/s400/鄭清文在樂樂台北(20090412台灣文化地圖首場宣傳).jpg" width="289" height="400" onmouseover="this.src='http://3.bp.blogspot.com/_pfYtts6VlQI/SeK5JdH1WzI/AAAAAAAAAX8/PgJE_iMHpy8/s400/IMG_6018.jpg';" onmouseout="this.src='http://1.bp.blogspot.com/_pfYtts6VlQI/SdPLiObXoBI/AAAAAAAAAXM/5Ga7rUepJIA/s400/鄭清文在樂樂台北(20090412台灣文化地圖首場宣傳).jpg';"></a>



完成了~~~
下課
課後補充:
有旁聽生問到, 可以使用在文字上嗎?
答案是可以的。只不過, 文字不像圖片本身有屬性可以使用, 所以, 可以將文字包在div之中, 再將mouseover/mouseout 加在div中。
<div onmouseover="this.innerHTML='1234567';" onmouseout="this.innerHTML='7654321';">7654321</div>

sample, try to onmouseover it! -->[

7654321

]