css 一張風景圖片，當滑鼠在圖片上面時，立即顯示圖片的文字說明，且有文字的地方圖象變模糊了，當滑鼠移開圖片時，圖片上的文字又消失了，圖片又恢複了原樣。這種效果是如何?的呢？用dreamweaver的Behavirs 功能可以實現，我在這裡介紹的是用CSS來製作，網頁的原始碼顯得更簡煉。
原理：利用CSS的屬性值可動態改變的特點。
思路：定義一個HTML元素CSS屬性的兩種屬性值，再用一個事件來觸發，一旦事件發生，則改變HTML元素的屬性值，從而達到預期目的。
製作方法：
1、在網頁中輸入一段文字（圖片的說明），用“Span”標記把它括起來，並給它加一個CSS的“ID”屬性（也就是給這段文字編一個代號，如：“Text1”，以便識別）；再插入一張圖片，同樣也用“Span”把它括起來，也給它加一個“ID”屬性，如：ID="image1"；
2、在網頁原始碼的〈head〉與〈/head〉之間加上下面這段CSS代碼：
〈!--
.style1 { position:absolute; left:210px; top:245px; width:218px; height:169px; z-index:2 }
.style2 { position:absolute; left:210px; top:245px; width:218px; height:169px; z-index:1}
.style3 { position:absolute; left:183px; top:245px; width:238px; height:159px; z-index:1; filter: Alpha(Opacity=10, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=50, FinishY=50)}
.style4 { position:absolute; left:183px; top:245px; width:238px; height:159px; z-index:2}
--〉
〈/style〉
上述代碼中的“top”、“left”、“width”、“height”的值用於定位文本和圖片在網頁中位置和範圍，這些屬性值要根據實際情況修改。“z-index”是決定當前對象所在層的覆蓋順序，改變它的值可使覆蓋順序發生變化。本例就是動態地改變這個屬性值來達到預期效果的；
3、在“Text1 ”那個“span”中載入CSS的“.style2”，讓那段文本一開始是處於下層的，並再載入一個“onmouseout”觸發事件，一旦這個事件發生，將做兩件事，一是讓“Text1”採用CSS的“.style2”，使文本移到下層；二是讓“image1”採用CSS的“.style4”，讓圖片移到上層。這樣，“Text1”及那段文本的代碼是這樣的：
〈span id="text1" class="style2" 〉〈font color="#0000FF" 〉〈br〉〈br〉這是著名〈br〉
自然風光勝地〈br〉
——黃山的仙〈br〉
人指路景點，〈br〉
真是一幅巧奪〈br〉
天工的自然佳〈br〉
作。〈/font〉〈/span〉
4、同樣在“image1 ”的那個“span”中載入CSS的“.style4”，讓那張圖片一開始是處於上層的，並再載入一個“onmouseover”觸發事件，一旦這個事件發生，將做兩件事，一是讓“Text1”採用CSS的“.style1”，把文本移到上層，變得可見；二是讓“image1”採用CSS的“.style3”，讓圖象移到下層，且增加了一個“alpha”濾鏡，使部分圖象產生半透明的效果（關於濾鏡的用法及作用請參看CSS濾鏡專題的有關文章）。這樣，“image1”及那張圖片的代碼是這樣的：
〈span id="image1" class="style4" 〉〈img src="/UploadPic/2007-4/200741155823870.jpg" width="237" height="169" 〉〈/span〉
上面代碼中“img”中的代碼在實際製作中將隨插入圖片的不同而改變。
