1.背景效果實現
使用CSS定義兩個類:
.style1 { background-image: url(bg.gif)}
.style2 { background-image: url(b.gif)}
分別用於鼠標經過和劃出時的背景圖象
然後在單元格中添加如下代碼:
onmouseover="this.className='style1'"
onmouseout="this.className='style2'"
就可以實現鼠標經過時背景漸變出現,移開後背景漸變消失的效果。
2.翻轉圖效果實現
在單元格中插入靜止小圖象,使用行為添加swap image效果,設置鼠標經過後翻轉為動態小圖象。
為更貼近效果,需要把翻轉圖效果應用到單元格上,在靜止小圖象代碼中剪切如下代碼:
onMouseOver="MM_swapImage('Image2','','2.GIF',1)"
onMouseOut="MM_swapImgRestore()"
粘貼到單元格代碼td標簽中。
就可以實現鼠標經過單元格時圖象翻轉,產生動態的效果。
至此即可實現全部的效果。
在這個例子中,使用dw實現的效果幾乎可以與flash制作的效果媲美,甚至更好一點(我們實現了鼠標劃出單元格時背景漸變消失的效果)。
小節:
1.在fw中精心制作漸變的背景圖象(我只是隨便做了兩個漸變圖象)+對導航單元格修飾可以使效果更加細膩,出色;
2.在使用該方法制作導航效果時,需要使用到多個單元格,注意swap效果不能被拷貝,拷貝代碼後需要修改兩處代碼:
onMouseOver="MM_swapImage('Image3','','2.GIF',1)"
<img src="替換webdesign.chinaitlab.com/UpFiles/200509/20050922221012149.gif" name="Image3" width="15" height="15" border="0" id="Image3">
修改翻轉圖的name為不同的值即可。
3.這個例子的技術含量並不是很高;而且偶不是很熟悉flash,不知道制作起來用dw或flash哪種更簡單一些,這裡提出來只是給大家提供一種解決問題的方法。
4.兩個簡單效果的疊加就可以制作出比較酷的效果,希望對大家能有所啟示
補充一點:制作動畫背景圖象時,為實現效果,需要設置gif動畫的循環為no looping(不循環)