回首頁 與我們連絡 網站地圖 加入我的最愛



 





請你先將滑鼠移至下方的紅色文字上看看會發生什麼情況,是不是很熟悉啊!這就是所謂的互動式的提示方塊說明:

唉呀!!好痛耶!!

碰碰我!!


經過了上面的測試效果是不是覺得很棒呢,這個效果是如何做出來的呢?複習一下前幾個CSS的學習單元的介紹,同時將本單元的新CSS性質屬性加入利用,當然,我們還得撰寫一個JavaScript程式才能達到這種效果呦!Step By Stype 的來實做一下:

標準的網頁內容開頭:
<html>
<HEAD>
<title>CSS與JavaScript範例1</title>

加入CSS樣式宣告內容:別忘了加上註解符號。
<STYLE>
<!--

定義一組用來作為提示方塊說明的網頁文字樣式:在主文中(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是遇到網頁標籤為<div>,並且在<div>標籤中加註樣式類別為tiptext的網頁標籤時,就將其被包括在<div>與</div>網頁標籤中的字串文字格式定為我們所宣告的網頁文字樣式:
div.tiptext
{
position:absolute;
visibility:hidden;
border-style:solid;
border-width:3;
border-color:Green;
background-color:Yellow;
}

這裡有幾個CSS的樣式屬性你或許不是很熟悉,下表是簡單的說明:

border-style 邊框樣式:用來設定包圍元件的四個邊框的樣式。
border-width 邊框寬度:用來設定包圍元件的外框線寬度。
border-color 邊框顏色:用來設定包圍元件的外框線顏色。
background-color 背景顏色:用來設定元件的背景底色,此範例中為設定說明方塊文字的背景底色。

這樣一段CSS樣式性質宣告將使我們的提示文字方塊擁有綠色、3pt的外框線、黃色的背景底色,同時文字提示方塊將是暫時被隱藏起來的。

接著定義一組標準的網頁標籤文字樣式:
一組標準的網頁標籤文字樣式意義為:在主文中(包括在<BODY>與</BODY>標籤之中的網頁內容)凡是遇到網頁標籤為<P>,並且在<P>標籤中加註樣式類別為text的網頁標籤時,就將其被包括在<P>與</P>網頁標籤中的字串文字格式定為’斜體’,外觀顏色定為’紅色’:
p.text
{
font-style:italic;
color:Red;
}

結束CSS樣式宣告內容:別忘了加上註解符號。
-->
</STYLE>

加入JavaScript程式語言所撰寫的程式敘述:

<script language="JavaScript">
<!--
//Valor 工作室-麻辣學園 http://www.twbts.com
var Tiptext
//顯現說明文字方塊的程式區段
function show(classname)

if(document.all)
{Tiptext=document.all(classname).style}
else 
{Tiptext=document.layers[classname]}
Tiptext.visibility='inherit' 
//將隱藏的文字提示方塊顯現出來
}
//隱藏說明文字方塊的程式區段
function hide(classname)
{
if(document.all)
{Tiptext=document.all(classname).style}
else 
{Tiptext=document.layers[classname]}
Tiptext.visibility='hidden'  
//將已經顯現的文字提示方塊隱藏起來
}
// -->
</script>

</HEAD>

開始主文(<BODY>標籤)並在網頁標籤<div>中直接加入我們所宣告的CSS屬性類別(class)設定,並且給被包括在<div>與</div>網頁標籤中的字串文字一個特有的辨別名稱(id="tips")
<BODY>
<div class="tiptext" id="tips">這是說明的方塊</div>

接著在網頁標籤<P>中直接加入我們所宣告的CSS屬性類別(class)設定,同時利用滑鼠移入被包括在<P>與</P>網頁標籤中的字串文字時所引發的滑鼠 onMouseOver事件觸發JavaScript程式的show副程式敘述,及滑鼠移出被包括在<P>與</P>網頁標籤中的字串文字時所引發的滑鼠 onMouseOut事件觸發JavaScript程式的hind副程式敘述。

<P class="text" onMouseOver="show('tips');" onMouseOut="hide('tips');" >會產生提示的字串</P>

結束主文(</BODY>)與網頁主體(</html>)標籤。
</BODY>
</html>

[實例展示]   [原始網頁內容]

 

CSS 教學文件
CSS入門講座
基礎網頁應用
進階網頁應用
結合JavaScript應用
 

本網頁內容由昱得資訊工作室楊宗誌(小誌 )製作(C) Copyright Valor-Studio since in 1993
非經正式書面同意,不得將全部或部分內容,以任何方式轉載於其他網站或用於任何商業行為