一段文字，當(dāng)鼠標(biāo)在文字上面單擊，文字消失，原來(lái)文字的地方卻立即變成了一張圖片，當(dāng)鼠標(biāo)在圖片上單擊，圖片又消失，原來(lái)的文字又重現(xiàn)了，像變魔術(shù)一樣，是不是有意思？！這種效果用Dreamweaver的Behavirs 功能也可實(shí)現(xiàn)，但那要增加一段javascript程序，明顯增加了不少代碼。而用CSS來(lái)制作這種效果，增加的代碼卻要少得多。 原理：利用CSS的屬性值可動(dòng)態(tài)改變的特點(diǎn)。 思路：定義一個(gè)HTML元素CSS屬性的兩種屬性值，再用一個(gè)事件來(lái)觸發(fā)，一旦事件發(fā)生，則改變HTML元素的屬性值，從而達(dá)到預(yù)期目的。 制作方法： 1、在網(wǎng)頁(yè)中輸入一段文字，用“Span”標(biāo)記把它括起來(lái)，并給它加一個(gè)CSS的“ID”屬性（也就是給這段文字編一個(gè)代號(hào)，如：“Text1”，以便識(shí)別）；再插入一張圖片，同樣也用“Span”把它括起來(lái)，也給它加一個(gè)“ID”屬性，如：ID="image1"； 2、在網(wǎng)頁(yè)源代碼的〈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)頁(yè)中位置，“backgroud-color”用于確定文本的背景顏色，這些屬性值要根據(jù)實(shí)際情況修改。visibility是決定當(dāng)前對(duì)象是否顯示的CSS屬性，本例就是動(dòng)態(tài)地改變這個(gè)屬性值來(lái)達(dá)到效果的； 3、在“Text1 ”的那個(gè)“span”中加載CSS的“.style2”，讓那段文本一開(kāi)始是顯示的，并再加載一個(gè)“onclick”觸發(fā)事件，一旦這個(gè)事件發(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〉 〈/span〉 4、同樣在“image1 ”的那個(gè)“span”中加載CSS的“.style3”，讓那張圖片一開(kāi)始是隱藏的，并再加載一個(gè)“onclick”觸發(fā)事件，一旦這個(gè)事件發(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="image/line.gif" width="316" height="26"〉〈/span〉 上面代碼中“img”中的代碼在實(shí)際制作中將隨插入圖片的不同而改變

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

文章標(biāo)題：巧用CSS制作文字變圖象特效
文章轉(zhuǎn)載：http://jinyejixie.com/news16/315216.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、搜索引擎優(yōu)化、面包屑導(dǎo)航、定制開(kāi)發(fā)、靜態(tài)網(wǎng)站、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)