網(wǎng)頁制作圖片特效有很多種，其中鼠標(biāo)經(jīng)過圖片，可以有圖片變大或切換圖片的效果，在一些網(wǎng)購(gòu)平臺(tái)上我們就可能會(huì)看到將鼠標(biāo)放置在一個(gè)商品上時(shí)，商品的圖片可能會(huì)變大或變成商品其他角度的圖片了，這其實(shí)就是兩個(gè)比較簡(jiǎn)單的鼠標(biāo)經(jīng)過圖片的特效，在DreamWeaver中就可以很方便的實(shí)現(xiàn)，下面小編就為大家介紹dw制作鼠標(biāo)經(jīng)過時(shí)圖像放大鼠標(biāo)離開圖像回原形效果方法，來看看吧！

素材：

操作步驟：

1、打開DW軟件，新建“HTML”，然后打開“布局”屬性，我們添加一個(gè)apdiv，用來置放我們的圖片；

2、在apdiv中插入“1行3列”表格；

3、然后在3列表格中分別插入圖像，每張圖像大小設(shè)置“寬300px，高300px”；圖像名稱從左到右依次設(shè)置為“a、b、c”；

4、我以中間的圖像為例，選中中間圖像(名稱b) ，打開“行為”——“改變屬性”；

5、彈出一個(gè)窗口，大家按照上面進(jìn)行設(shè)置：

注：寬度大小要設(shè)置比原來要大，這樣才能顯示圖像放大效果；

6、將觸發(fā)行為修改為onmouseover，也就是鼠標(biāo)放到圖片上面的時(shí)候，就會(huì)將圖片的寬度改為600；

7、再次打開“行為——改變屬性”，設(shè)置和上一步驟相同，但這次要改變高度大小，同樣高度數(shù)值要改為比之前的大；

8、將觸發(fā)行為修改為onmouseover，也就是鼠標(biāo)放到圖片上面的時(shí)候，就會(huì)將圖片的高度改為600；

9、還有兩個(gè)行為要添加，按照上面的方法，目的是當(dāng)鼠標(biāo)離開圖片的時(shí)候，讓圖片恢復(fù)到原來的大小，如圖所示：

注：將觸發(fā)行為修改為onmouseout，也就是鼠標(biāo)放到圖片上面的時(shí)候，就會(huì)將圖片的高度恢復(fù)為300；

10、保存，預(yù)覽；

鼠標(biāo)經(jīng)過，圖片變大；

鼠標(biāo)離開，圖片恢復(fù)正常；

教程結(jié)束，以上就是dw制作鼠標(biāo)經(jīng)過時(shí)圖像放大鼠標(biāo)離開圖像回原形效果方法介紹，操作很簡(jiǎn)單的，大家按照上面步驟進(jìn)行操作，希望能對(duì)大家有所幫助！

注：本篇文章系腳本之家依照真實(shí)經(jīng)歷原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處！

總結(jié)

以上是生活随笔為你收集整理的DW里面html鼠标点击特效,dw制作鼠标经过时图像放大鼠标离开图像回原形效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。