電腦輔助語言教學

Computer Assisted Language Learning and Teaching

Instructor: Chi-Fen Emily Chen  陳其芬

Department of English

National Kaohsiung First University of Science and Technology, Taiwan


Course Introduction

課程簡介

Course Schedule

課程進度

Course Contents

課程內容

Online Dictionaries

線上字典

Web Resources

網路資源

Student Blogs

學生網誌

Student Projects

學生作品

Discussion Forum

線上討論區

 

JavaScript (4):  文字說明視窗

Mouse-Over - An Annotation Pop-up Box

    一、功用:
 

當滑鼠移到需註明讓讀者知道的某個字或某個詞時,會出現一個說明視窗。

二、程式範例:
       

滑鼠滑到此→ 課程介紹

 

    三、程式碼及插入位置:
      1、將下列程式碼插入<head></head>間:右鍵另存新檔下載原始碼

<SCRIPT language=JavaScript>
<!--function MM_swapImgRestore()

{ //v3.0var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}

function MM_preloadImages()

 { //v3.0var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}

function MM_findObj(n, d)

 { //v4.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage()

{ //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</SCRIPT>

<SCRIPT language=JavaScript>
<!--
<!--
function MM_reloadPage(init)

 { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_showHideLayers()

{ //v3.0 var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</SCRIPT>

 

     

2、將下列程式碼插入<body></body>右鍵另存新檔下載原始碼

       

<DIV id=new
style="BACKGROUND: #ffffcc; BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FILTER: alpha(opacity=70,style=0); PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 3px; PADDING-TOP: 6px; POSITION: absolute;
HEIGHT: 100px; LEFT:535px; POSITION: absolute; TOP: 45px; VISIBILITY: hidden; WIDTH: 80px; Z-INDEX: 1; layer-background-color: #333333">
<DIV align=left>
<FONT size=2><B><FONT
color=#ff0000>
課程介紹:</FONT>在此處,你能從中得知各個課程的資訊。
</B></FONT></DIV></DIV>

註:用「」此色標起來的數值及字能應自己所需做改變。

      3、在圖檔設定的網址前加入下列程式碼:右鍵另存新檔下載原始碼
       

<a onmouseout="MM_showHideLayers('new','','hide')" onmouseover="MM_showHideLayers('new','','show')" target="main" href="#"></a></p>

 

註:用「」此色標起來的數值及字能應自己所需做改變。