電腦輔助語言教學

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 (2):  選單說明視窗

Mouse-Over - A Pop-up Box in the Menu

    一、功用:
 

當滑鼠移至圖片按鈕上時,會出現一文字框用來說明該按鈕連接到的網頁大致上的內容。

二、程式範例:

     
     
     
    三、程式碼及插入位置:
      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>

 

//第二個選項說明

<DIV id=objective
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="pasthistory/pasthistory.htm"></a></p>

 

//第二個選項連結

<a onmouseout="MM_showHideLayers('objective','','hide')" onmouseover="MM_showHideLayers('objective','','show')" target="main" href="pasthistory/pasthistory.htm"></a></p>

註:用「」此色標起來的字為需加入的語法。