用CSS實現文字變圖象特效_CSS/HTML

　　一段文字，當滑鼠在文字上面單擊，文字消失，原來文字的地方卻立即變成了一張圖片，當滑鼠在圖片上單擊，圖片又消失，原來的文字又重現了，像變魔術一樣，是不是有意思?!這種效果用Dreamweaver的Behavirs 功能也可實現，但那要增加一段javascript程序，明顯增加了不少代碼。而用CSS來製作這種效果，增加的程式碼卻少很多。

　　原理:利用CSS的屬性值可動態改變的特性。

　　思路:定義一個HTML元素CSS屬性的兩種屬性值，再用一個事件來觸發，一旦事件發生，則改變HTML元素的屬性值，從而達到預期目的。

　　製作方法:

　　1、在網頁中輸入一段文字，用“Span”標記把它括起來，並給它加一個CSS的“ID”屬性(也就是給這段文字編一個代號，如:“Text1”，以便辨識);再插入一張圖片，同樣也用「Span」把它括起來，也給它加一個「ID」屬性，如:ID="image1";

　　2、在網頁原始碼的〈head〉與〈/head〉之間加上下面這段CSS程式碼:

　　〈style type="text/css"〉

　　〈!--

　　.style1 { position:absolute; top: 200px; left:180px;

　　background-color:#ccccff; visibility:hidden}

　　.style2 { position:absolute; top: 200px; left:180px;

　　background-color:#ccccff; }

　　.style3 { position:absolute; top: 190px; left:180px;

　　visibility:hidden}

　　.style4 { position:absolute; top: 190px; left:180px; }

　　--〉

　　〈/style〉

　　上述程式碼中的「top」、「left」的值用於定位文字和圖片在網頁中位置，「backgroud-color」用於確定文字的背景顏色，這些屬性值要根據實際情況修改。 visibility是決定目前物件是否顯示的CSS屬性，本例就是動態地改變這個屬性值來達到效果的;

　　3、在“Text1 ”的那個“span”中加載CSS的“.style2”，讓那段文本一開始是顯示的，並再加載一個“onclick”觸發事件，一旦這個事件發生，將做兩件事，一是讓“Text1”採用CSS的“.style1”，把文字隱藏;二是讓“image1”採用CSS的“.style4”，讓圖象顯示。這樣，「Text1」及那段文字的程式碼是這樣的:〈span　id="text1" class="style2" onclick="document.all.text1.className=''style1''; document.all.image1. className=''style4'' "〉〈font color="#0000FF"〉滑鼠在這段文字上點擊，文字消失變成圖象。在圖像上單擊，圖象消失，恢復為文字。 〈/font〉

　　〈/span〉
　　4、同樣在“image1 ”的那個“span”中加載CSS的“.style3”，讓那張圖片一開始是隱藏的，並再加載觸發事件，一旦這個事件發生，將做兩件事，一是讓“Text1”採用CSS的“.style2”，把文本顯示;二是讓“image1”採用CSS的“.style3”，讓圖象隱藏。這樣，「image1」及那張圖片的代碼是這樣的:

　　〈span id="image1" class="style3" onclick="document.all.text1.className=''style2'';document.all.image1.

　　className=''style3'' "〉〈img src="image/line.gif" width="316"

　　height="26"〉〈/span〉

　　上面程式碼中「img」中的程式碼在實際製作中將隨插入圖片的不同而改變。