18. JavaScript 滑鼠事件 ( Event onmouseover onmouseout) 教學

JavaScript的滑鼠事件有很多，這次要介紹的是最長用的兩個
onmouseover: 鼠標在物件上方
onmouseout: 鼠標不在物件上方

a. 下圖為普通的圖案標籤語法






b. 圖片如下圖，但鼠標在圖上面不會有任何動作
















c. 在img標籤加入Id，javascript才可以取得圖片的id，然後改變圖片的路徑src，如下圖所示。用兩個function來改變圖片路徑，用onmouseover和onmouseout事件來呼叫mouseOver和mouseOut function。
















d. 鼠標在圖片上方，畫面會變成下圖；鼠標離開後，畫面會變成之前的圖



















e. 真實範例如下圖，可試著把鼠標移到圖上面，看會有何變化。