dreamweaver怎么實現(xiàn)鼠標(biāo)放在不同的位置顯示不同的圖片?
我要評論dreamweaver中想要實現(xiàn)一種圖片切換效果，就是鼠標(biāo)放在圖片的不同區(qū)域上就會顯示不同的圖片，該怎么制作呢？下面我們就來看看詳細(xì)的教程。
Adobe Dreamweaver CS6 離線正式版 by Ansifa (2013.2.22)
- 類型：網(wǎng)頁設(shè)計
- 大?。?/span>93.1MB
- 語言：簡體中文
- 時間：2013-09-27
1、首先用ps或者其他軟件將幾張圖片的大小p成一樣的。比如筆者把三張圖片都p成了200x268的大小。
2、打開Dreamweaver，新建一個網(wǎng)頁（筆者這里建立一個html類型的網(wǎng)頁）。
3、按Ctrl+S保存新建的網(wǎng)頁。
4、點擊菜單欄：插入-->表格。插入一個1行1列的表格。
5、把鼠標(biāo)指針放到表格中，單擊菜單欄的:插入-->布局對象-->AP Div,插入一個AP Div。
6、把鼠標(biāo)放到剛剛新建的AP Div里邊，點擊菜單欄的：插入-->圖像，選擇一張需要插入的圖片。
7、按上面的方法依次添加其他幾個AP Div，并在里邊插入圖片。
8、接下來插入一個AP Div，然后再里邊添加一個1行3列的表格。
9、鼠標(biāo)指針放到表格第一個方框中，單擊菜單欄：插入-->表單-->按鈕。操作如圖
10、鼠標(biāo)點中添加的按鈕，然后再下方屬性面板中，把值修改為1。
11、按照上述步驟依次為表格的第二個框、第三個框添加一個按鈕，并把屬性值改成2和3。如圖
12、把幾個AP Div移動到同一個區(qū)域。如下圖
13、單擊菜單欄：窗口-->行為，打開行為面板。
14、鼠標(biāo)點擊第一個方框的按鈕，點擊標(biāo)簽檢查器行為面板下方的“+”號，彈出的菜單中選擇“顯示-隱藏元素”。
15、按照下圖所示，把AP Div1設(shè)置成顯示，AP Div2設(shè)置成隱藏，AP Div3設(shè)置成隱藏。AP Div4可以設(shè)置成顯示，也可以不設(shè)置（默認(rèn)顯示）。
16、如圖，點擊行為面板左邊的英文，在彈出的菜單中選擇onFocus。
17、按照上面的步驟，依次把表格第二個方框、第三個方框的按鈕設(shè)置成如下圖所示。
以上就是dreamweaver圖片切換效果的制作方法，希望大家喜歡，請繼續(xù)關(guān)注腳本之家。
相關(guān)推薦：
怎么使用Dreamweaver給網(wǎng)站圖片添加alt標(biāo)簽?
dreamweaver 怎么在網(wǎng)頁中使用div展示圖片效果?
相關(guān)文章
Dreamweaver網(wǎng)頁中怎么添加電子郵箱鏈接?
Dreamweaver網(wǎng)頁中怎么添加電子郵箱鏈接？Dreamweaver設(shè)計的網(wǎng)頁想要添加聯(lián)系我們的文字直接鏈接到電子郵箱，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參2018-01-05
Dreamweaver網(wǎng)頁中的文本怎么添加背景圖片?
Dreamweaver網(wǎng)頁中的文本怎么添加背景圖片？Dreamweaver設(shè)計的文本網(wǎng)頁太單調(diào)，想要給文本添加星空背景圖片，該怎么添加呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參2018-01-05
Dreamweaver怎么添加邊框? Dreamweaver邊框的制作方法
Dreamweaver怎么添加邊框？Dreamweaver想要制作一個紅色邊框，該怎么制作呢？下面我們就來看看Dreamweaver邊框的制作方法，需要的朋友可以參考下2018-01-04
Dreamweaver網(wǎng)頁怎么添加彈出窗口信息?
Dreamweaver網(wǎng)頁怎么添加彈出窗口信息？很多網(wǎng)站都有歡迎信息的彈窗，想要給網(wǎng)頁添加一個彈窗，該怎么添加呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-01-04
Dreamweaver怎么上傳站點到服務(wù)器？Dreamweaver中制作好的玩野想要上傳到服務(wù)器，該怎么上傳站點呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-01-03
Dreamweaver怎么設(shè)置狀態(tài)欄文本?
Dreamweaver怎么設(shè)置狀態(tài)欄文本？Dreamweaver設(shè)計網(wǎng)頁的時候，想要制作在狀態(tài)欄制作顯示歡迎的話語，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-01-03
Dreamweaver網(wǎng)頁制作怎么使用css樣式嵌套?
Dreamweaver網(wǎng)頁制作怎么使用css樣式嵌套？Dreamweaver設(shè)計網(wǎng)頁的時候，想要使用css樣式嵌套，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-01-02
Dreamweaver怎么裁剪圖片？Dreamweaver中插入的圖片太大了，想要裁剪圖片，并設(shè)置圖片的屬性，該怎么設(shè)置呢？下面我們就來看看dw編輯圖片的技巧，需要的朋友可以參考下2018-01-02
Dreamweaver網(wǎng)頁怎么創(chuàng)建css樣式的復(fù)合聲明?
Dreamweaver網(wǎng)頁怎么創(chuàng)建css樣式的復(fù)合聲明？Dreamweaver中想要制作一個css樣式的復(fù)合聲明，該怎么制作呢？下面我們就來看看詳細(xì)的教程，需要的朋友可以參考下2018-01-02
Dreamweaver網(wǎng)頁中怎么插入導(dǎo)航條? dw網(wǎng)頁導(dǎo)航條的使用方法
Dreamweaver網(wǎng)頁中怎么插入導(dǎo)航條？Dreamweaver中網(wǎng)頁為了更有層次感，想要插入導(dǎo)航條，該怎么使用導(dǎo)航條呢？下面我們就來看看dw網(wǎng)頁導(dǎo)航條的使用方法，需要的朋友可以參考2018-01-02
