1、htm插入背景圖的方法1插入背景圖片有兩種方法，一種是用html的img標(biāo)簽，另一種是利用css的background標(biāo)簽插入具體操作是首先新建一個(gè)html文件，寫入兩個(gè)div，分別用來演示兩種方法插入標(biāo)簽2首先是用html標(biāo)簽插入圖片；1新建html文檔2準(zhǔn)備好需要用到的圖標(biāo)3書寫hmtl代碼ltdiv id=quotaaaaquotltul，ltliltimg src=quotlanren01jpgquot width=quot218quot height=quot155quot lth2成都康定理塘稻城亞丁然后說再見lth2ltli4書寫css；代碼有bug，修改后如下需要注意，拷貝下面這段代碼，保存為 html后綴名的文件需要自己在相同的目錄下，放置兩張圖片，小圖片jpg 大圖片jpg 效果如下圖當(dāng)鼠標(biāo)懸停在小圖片上面的時(shí)候，會(huì)顯示大圖片鼠標(biāo)移出，隱；1首先輸入代碼下方的代碼lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot lthtml xmlns=quot lt；原理hover觸發(fā)CSS臨近選擇器 所需工具DW用來給圖片畫熱區(qū)，PS算出彈出層的top和left偏移值我在Demo里畫了三個(gè)熱區(qū)位置如下圖，你用鼠標(biāo)懸停到上面即可看到效果源碼lt！DOCTYPE htmllthtml lang=quotenquot；這個(gè)完全不用代碼做，用代碼問題就復(fù)雜以首頁為例鼠標(biāo)經(jīng)過圖片，在首頁的位置放兩個(gè)圖片1一張是直接顯示的，2另一張是鼠標(biāo)經(jīng)過顯示的插入圖片方法如下單擊要插入的位置插入記錄圖像對(duì)象鼠標(biāo)；Dreamweaver中可以自動(dòng)設(shè)置的 工具欄中 “插入”“圖片對(duì)象”“鼠標(biāo)經(jīng)過圖片”如果是用CSS實(shí)現(xiàn)的話，可以在需要設(shè)置動(dòng)態(tài)效果的標(biāo)簽中使用偽類hover 具體怎么用，就看你對(duì)CSS的掌握程度了PS該方法不適用于IE6，其他的。

2、1新建Axure Pr項(xiàng)目，取名“Axure制作鼠標(biāo)懸停圖片切換效果”2找一個(gè)網(wǎng)站首頁獲取所需素材，以下素材來自新浪首頁，圖片大小360*272px3從控件苦Widgets拖拽一個(gè)動(dòng)態(tài)面板控件Danamic Panel到Home首頁，取名“鼠標(biāo)懸?！保挥胘s寫鼠標(biāo)事件，鼠標(biāo)移入更改img的src內(nèi)的路徑；charset quotutf8quot*科e互聯(lián)特效基本框架CSS* body， ul， dl， dd， dt， ol， li， p， h1， h2， h3， h4， h5， h6， textarea， form， select， fieldset， table， td， div， input margin0padding0webkit；2然后對(duì)HTML中的內(nèi)容定義一些樣式，如下圖所示，主要是標(biāo)題以及ul的樣式3接下來就給圖片所在的li定義寬高，如下圖所示4然后給圖片設(shè)置過渡效果，過渡使用transition屬性，如下圖所示5當(dāng)鼠標(biāo)懸停在圖片上時(shí)。

3、1使用css來控制變化，即給圖片添加css樣式 2在圖片樣式綁定hover事件，控制圖片在鼠標(biāo)懸停時(shí)變化 定義動(dòng)畫 webkitkeyframes imgChange 0%borderradius0% 50%borderradius50% 100%borderradius；1準(zhǔn)備切換圖片素材，一般是兩張，如圖，放入img文件夾，跟HTML同級(jí)1準(zhǔn)備切換圖片素材，一般是兩個(gè)，如圖，放在img文件夾里，和HTML一個(gè)級(jí)別2然后用img嵌入到網(wǎng)頁，嵌入其中的一張，另外一張待會(huì)切換2然后用im；很多種方法用CSS可以實(shí)現(xiàn)，用JS也可以實(shí)現(xiàn)主要看你是想實(shí)現(xiàn)個(gè)什么東西如果是替換背景圖片的話，用CSS的話，那就 修改hover里的背景圖片so easy簡(jiǎn)單的很CSS a backgroundimageurl1jpgahover；lt！DOCTYPE htmlltheadltscriptwindowonload = function var img = documentgetElementByIdquotimgTestquot if documentaddEventListener imgaddEventListenerquotmouseoverquot，doMouseover，false img。

4、菜單欄找到HTML效果，在第一欄里選擇當(dāng)鼠標(biāo)停留時(shí)，應(yīng)用欄里選擇交換另一張圖片。