原理:利用CSS的屬性值可動態(tài)改變的特點。
思路:定義一個HTML元素CSS屬性的兩種屬性值，再用一個事件來觸發(fā)，一旦事件發(fā)生，則改變HTML元素的屬性值，從而達到預(yù)期目的。
制作方法:
1、在網(wǎng)頁中輸入一段文字，用“Span”標(biāo)記把它括起來，并給它加一個CSS的“ID”屬性(也就是給這段文字編一個代號，如:“Text1”，以便識別);再插入一張圖片，同樣也用“Span”把它括起來，也給它加一個“ID”屬性，如:ID="image1";
2、在網(wǎng)頁源代碼的〈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”、“l(fā)eft”的值用于定位文本和圖片在網(wǎng)頁中位置，“backgroud-color”用于確定文本的背景顏色，這些屬性值要根據(jù)實際情況修改。visibility是決定當(dāng)前對象是否顯示的CSS屬性，本例就是動態(tài)地改變這個屬性值來達到效果的;
3、在“Text1 ”的那個“span”中加載CSS的“.style2”，讓那段文本一開始是顯示的，并再加載一個“onclick”觸發(fā)事件，一旦這個事件發(fā)生，將做兩件事，一是讓“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"〉鼠標(biāo)在這段文字上單擊，文字消失變?yōu)閳D象。在圖象上單擊，圖象消失，恢復(fù)為文字?！?font〉
4、同樣在“image1 ”的那個“span”中加載CSS的“.style3”，讓那張圖片一開始是隱藏的，并再加載一個“onclick”觸發(fā)事件，一旦這個事件發(fā)生，將做兩件事，一是讓“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="/images/NullPic.gif" width="316" height="26"〉〈/span〉 |
上面代碼中“img”中的代碼在實際制作中將隨插入圖片的不同而改變。
您發(fā)布的評論即表示同意遵守以下條款:
一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權(quán)益;
二、不得發(fā)布國家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對自己在本站的言論和行為負責(zé);
三、本站對您所發(fā)布內(nèi)容擁有處置權(quán)。
蘇公網(wǎng)安備 32070502010230號