在一些商品展示頁面中，常常需要實(shí)現(xiàn)當(dāng)鼠標(biāo)放到圖片上時，圖片會放大，當(dāng)鼠標(biāo)離開圖片時，圖片恢復(fù)到原來大小的效果。下面將介紹具體的方法：步驟1：修改頁面屬性首先打開Dreamweaver，并修改頁面屬性，

在一些商品展示頁面中，常常需要實(shí)現(xiàn)當(dāng)鼠標(biāo)放到圖片上時，圖片會放大，當(dāng)鼠標(biāo)離開圖片時，圖片恢復(fù)到原來大小的效果。下面將介紹具體的方法：

步驟1：修改頁面屬性

首先打開Dreamweaver，并修改頁面屬性，將頁面背景色修改為灰色，以適應(yīng)圖片展示。

步驟2：添加容器

通過打開布局屬性，添加一個apdiv容器，用來裝載圖片。設(shè)置該容器的寬度為800px，高度為299px，并將溢出設(shè)置為hidden，以保持整體布局的穩(wěn)定。

步驟3：插入圖片展示欄

接著，在容器內(nèi)部插入一個1行5列的表格，表格寬度設(shè)置為100%，然后插入五張圖片，形成一個基本的圖片展示欄。

步驟4：添加放大效果

選擇其中一張圖片，在屬性欄中給其添加一個id，比如im1。然后為圖片添加行為，點(diǎn)擊添加按鈕，選擇【改變屬性】。

步驟5：調(diào)整圖片大小

打開改變屬性對話框，選擇元素類型為img，ID為之前設(shè)置的im1，屬性選擇【輸入】，填寫width，將新的值設(shè)置為300。這樣，當(dāng)鼠標(biāo)放到圖片上時，圖片的寬度會改變?yōu)?00px。

步驟6：設(shè)置鼠標(biāo)經(jīng)過效果

接著再添加一個行為，目的是讓鼠標(biāo)放在圖片上時，圖片的高度改變?yōu)?50px。同樣地，添加兩個行為，分別用于讓圖片在鼠標(biāo)離開時恢復(fù)到原來的大小。

步驟7：應(yīng)用到所有圖片

給所有的圖片添加以上四個行為，這樣當(dāng)鼠標(biāo)放到圖片上時，就能看到放大后的效果，當(dāng)鼠標(biāo)離開時，圖片恢復(fù)到原來的大小。

通過以上步驟，您可以輕松地在Dreamweaver中實(shí)現(xiàn)鼠標(biāo)經(jīng)過時圖片放大的效果，為商品展示頁面增添更多視覺吸引力。