雖然在滑鼠移到連結時,

游標會變成手勢,

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

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

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

 

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

在公司的網頁上很常見,

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

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

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

(預載圖片的部份請另外在body裡加載onload)

 

語法的使用如下:

1.在</head>之前加上簡單的script

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

 

2.在圖片上增加onmouseover及onmouseout的參數

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

 

多個連結時,

只要重覆2的圖片語法,更改圖片即可!

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

 

打完收工!


發表自: 九五二七九五二七
愛漫畫愛遊戲愛上網愛星爺,小時摸到阿羅士與AppleII後註定宅一輩子,從紅白機玩到PS4,從386打到Xeon,沒日沒夜的打電動;待過所有宅產業,從光華混到NOVA,從遊戲滾到動漫,從攝影器材爬到網路電信,喜愛學習多於睡覺,無時無刻散發一股宅味,但號稱長的像梁朝偉XD

覺得讚想推薦或分享嗎?