一張風(fēng)景圖片，當鼠標在圖片上面時(shí)，立即顯示圖片的文字說(shuō)明，且有文字的地方圖象變模糊了，當鼠標移開(kāi)圖片時(shí)，圖片上的文字又消失了，圖片又恢復了原樣。這種效果是如何實(shí)現的呢？用Dreamweaver的Behavirs 功能可以實(shí)現，我在這里介紹的是用CSS來(lái)制作，網(wǎng)頁(yè)的源代碼顯得更簡(jiǎn)煉。先看看下面的效果圖：
鼠標不在圖片上
鼠標移到圖片上，圖片的說(shuō)明文字出現了
原理：利用CSS的屬性值可動(dòng)態(tài)改變的特點(diǎn)。
思路：定義一個(gè)HTML元素CSS屬性的兩種屬性值，再用一個(gè)事件來(lái)觸發(fā)，一旦事件發(fā)生，則改變HTML元素的屬性值，從而達到預期目的。
制作方法：
1、在網(wǎng)頁(yè)中輸入一段文字（圖片的說(shuō)明），用“Span”標記把它括起來(lái)，并給它加一個(gè)CSS的“ID”屬性（也就是給這段文字編一個(gè)代號，如：“Text1”，以便識別）；再插入一張圖片，同樣也用“Span”把它括起來(lái)，也給它加一個(gè)“ID”屬性，如：ID="image1"；
2、在網(wǎng)頁(yè)源代碼的〈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”的值用于定位文本和圖片在網(wǎng)頁(yè)中位置和范圍，這些屬性值要根據實(shí)際情況修改。“z-index”是決定當前對象所在層的覆蓋順序，改變它的值可使覆蓋順序發(fā)生變化。本例就是動(dòng)態(tài)地改變這個(gè)屬性值來(lái)達到預期效果的；
3、在“Text1 ”那個(gè)“span”中加載CSS的“.style2”，讓那段文本一開(kāi)始是處于下層的，并再加載一個(gè)“onmouseout”觸發(fā)事件，一旦這個(gè)事件發(fā)生，將做兩件事，一是讓“Text1”采用CSS的“.style2”，使文本移到下層；二是讓“image1”采用CSS的“.style4”，讓圖片移到上層。這樣，“Text1”及那段文本的代碼是這樣的：
〈span id="text1" class="style2" onmouseout="document.all.text1.className=‘style2‘; document.all.image1.className=‘style4‘;"〉〈font color="#0000FF" 〉〈br〉〈br〉這是著(zhù)名〈br〉
自然風(fēng)光勝地〈br〉
——黃山的仙〈br〉
人指路景點(diǎn)，〈br〉
真是一幅巧奪〈br〉
天工的自然佳〈br〉
作?！?font〉〈/span〉
4、同樣在“image1 ”的那個(gè)“span”中加載CSS的“.style4”，讓那張圖片一開(kāi)始是處于上層的，并再加載一個(gè)“onmouseover”觸發(fā)事件，一旦這個(gè)事件發(fā)生，將做兩件事，一是讓“Text1”采用CSS的“.style1”，把文本移到上層，變得可見(jiàn)；二是讓“image1”采用CSS的“.style3”，讓圖象移到下層，且增加了一個(gè)“alpha”濾鏡，使部分圖象產(chǎn)生半透明的效果（關(guān)于濾鏡的用法及作用請參看CSS濾鏡專(zhuān)題的有關(guān)文章）。這樣，“image1”及那張圖片的代碼是這樣的：
〈span id="image1" class="style4" onmouseover="document.all.text1.className=‘style1‘; document.all.image1.className=‘style3‘"〉〈img src="image/cssp1.jpg" width="237" height="169" 〉〈/span〉
上面代碼中“img”中的代碼在實(shí)際制作中將隨插入圖片的不同而改變。
至此，制作結束，按F12就可看到預期的效果了，你看！增加的代碼不多吧？若把本例的中的文字也換成圖片，那就是動(dòng)態(tài)圖片合成的網(wǎng)頁(yè)特效了。
