使用簡單的JavaScript來達成onmouseover及onmouseout切換多張圖片效果

雖然在滑鼠移到連結時，

游標會變成手勢，

但是畫面上若無任何變動，總覺得不夠直覺，

所以一直以來寫網頁的習慣，

從加底線到文字換色再到換文字背景底色...

--summary--

 

但有時按鈕或者畫面上的連結，是一張圖片，

在公司的網頁上很常見，

而使用DreameWeaver所用的JavaScript又相當的肥大，

後來找到了一個簡單的語法，可以達到一樣的效果，

而且有多個連結多張圖片，一樣可以使用，

（預載圖片的部份請另外在body裡加載onload）

 

語法的使用如下：

１．在</head>之前加上簡單的script

<script>
function over(imgObj,picname) { imgObj.src=picname; } 
function out(imgObj,picname) { imgObj.src=picname; } 
</script>

 

２．在圖片上增加onmouseover及onmouseout的參數

<img onmouseover="over(this,'menu1s.jpg')" onmouseout="out(this,'menu1.jpg')" src= "menu1.jpg" style="cursor:hand">

 

多個連結時，

只要重覆２的圖片語法，更改圖片即可！

當然不一定要連結，只要希望在游標移過時會切換圖片，都可使用此語法！

 

打完收工！