[DW] 滑鼠滑過(變換/切換)連結按鈕影像

分類:Dreamweaver | 2008-12-17
  透過Dreamweaver可快速的完成,當滑鼠滑過圖片即時變換影像,這功能相當的方便也大量的減低網頁設計師的製作負擔,但今天若要按下滑鼠切換圖片時,應該大部分的人都是直接採用圖層開閉的方式來解決此問題,這樣製做相當的方便,而一旦再新增選項時,則須在對所有的選單再一一重設圖層開關閉。
  這時心中的怒火就會雄雄的燃起,心中開始不斷的背頌起兒時最朗朗上口的三字經,好在有好友『男丁格爾』大力相挺,讓我再度將三字經封存了起來。
準備素材:
從下圖可清楚的看到,一個按鈕需準備三張圖,分別為未碰到碰到按下...等。

Step1
開啟Dreamweaver,選擇工具箱中的 常用/ 影像,先將滑鼠滑過變換影像的效果製出來。

Step2 切換到程式碼模式下,將語法拷貝到如下圖的位置。

程式碼:
var nowMenu = {"id": null, "name": null, "img": null}; function showIt(pic,opic,id,name){  var div = document.getElementById(id);   if(nowMenu.id != null &amp;&amp; nowMenu.id != id){   document.getElementById(nowMenu["id"]).innerHTML ="<img src="+nowMenu[" id="+nowMenu[" border="0" />";  }  nowMenu["id"] = id;  nowMenu["name"] = name;  nowMenu["img"] = "img/" + opic;  div.innerHTML ="<img src="img/" id="+name+" border="0" />"; }
Step3
找到第一個按鈕連結的地方,於onmouseover="MM_swapImage('Image1','','img/homeOverbt.gif',1)" 之後再加入下列語法,如下圖所示。

程式碼:
onClick="showIt('homeOnbt.gif','homeOffbt.gif','img1','Image1');" id="img1"
※語法解說:
homeOnbt.gif←按下時所要切換影像的檔案
homeOffbt.gif←按下時所要切換影像的檔案
img1←按下時所要切換的id,如第二個按鈕則取名為img2、img3...依此類推Image1←
並請於DW所建立時一樣,否則滑鼠滑過變換影像會失效

Step4
按F12預覽,此時可發現當滑鼠按下時會切換成紫色,滑過為紅色。

[範例預覽] [範例下載]




回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 6 梅留言

  • 第6梅
    TRA 說道:

    你好
    目前我正在做畢業製作
    我想請問
    如果我想要按下按鈕之後可以有燈箱的特效的話應該怎麼做??
    因為目前我遇到這個問題 但爬了很多文都不知道怎麼解決
    因為大部分都是教"圖片燈箱" 是直接圖片就可以燈箱特效了

    但是我希望做的是按下某一個按鈕(滑鼠變換影像-連結)就可以有燈箱的特效

    請問這方面要怎麼做呢?
    謝謝您

    回應:
    這一個燈箱你可參考 看看
    http://lokeshdhakar.com/projects/lightbox2/
  • 第5梅
    Min 說道:

    請問,若同一畫面有兩組以上要用使此效果的圖片,要怎麼做? 謝謝。

    回應:
    給與不同的id
  • 第4梅
    豆花 說道:

    你好
    看了你的文章我受益良多^^
    但是請問一下
    如果我想要用切換按鈕 但又可以滑鼠移過去時有下拉式選單 那該怎麼做呢?