Sanji
Occupation:Cook
Comic Book:One Piece

電腦輔助語言教學

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 (5): 整段文字變換

Mouse-Over - A Text Change

    一、功用:
 

當滑鼠移到圖片上時,原本說明文字會整個片段改變。

二、程式範例:

     

 

    三、程式碼及插入位置:
      1、將下列程式碼插入<head></head>間:右鍵另存新檔下載原始碼
<LINK href="05.files/basic.css" type=text/css rel=stylesheet>

<SCRIPT language=JavaScript>
<!--
function MM_preloadImages() { //v3.0
var 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_swapImgRestore() { //v3.0
var 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_findObj(n, d) { //v4.01
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 && d.getElementById) x=d.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];}}
//-->
function MM_findObj(n, d) { //v4.01
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 && d.getElementById) x=d.getElementById(n); return x;}

function MM_showHideLayers() { //v6.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 class=contentenglish id=a1
style="LEFT:
118; VISIBILITY: visible; OVERFLOW: auto; WIDTH: 335; POSITION: absolute; TOP: 88; HEIGHT: 80"><STRONG>
<FONT color=#ff6600>
Sanji</FONT></STRONG><BR>Occupation:Cook<BR><FONT color=#0000ff size=-2>Comic Book:One Piece</FONT> </DIV>
 

<DIV id=a2 style="LEFT: 118; VISIBILITY: hidden; WIDTH: 335; POSITION: absolute; TOP: 88; HEIGHT: 80"><SPAN
class=contentchinese><FONT color=#009933><STRONG>
香吉士</STRONG><BR><FONT
color=#000000>
職業:廚師</FONT></FONT></SPAN> <BR><SPAN class=contentenglish><STRONG><SPAN class=contentenglish><STRONG><FONT
color=#ff0000>
漫畫:海賊王</FONT></STRONG></SPAN></STRONG></SPAN>
</DIV>

 

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

 

      3、在圖檔的地方加入下列程式碼:右鍵另存新檔下載原始碼
       

<img onmouseover="MM_showHideLayers('a1','','hide','a2','','show')"
onmouseout="MM_showHideLayers('
a1','','show','a2','','hide')" border="0" src="Sanji05.bmp"
width="73" height="110">

 

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