(教學第25篇)影像物件 上篇
網頁中的影像(圖片)在JavaScript是將其視為一個網頁元件！影像是一個網頁中的元件？這麼說來，JavaScript不就可以隨意的操控它？沒錯！只要你在圖片連結標籤<IMG>中定義該連結圖片的名稱（NAME屬性），那麼要變換圖片連結標籤裡的圖片、或者是令圖片產生變換的效果，通通都是輕易的事，短短的幾行程式敘述，就可以造就出驚人的效果！[color=DarkOrange][size=5][b]基礎的影像控制[/b][/size][/color]
請你先瞧一瞧下列這行HTML標籤：[code]<IMG SRC=”bg.gif” HEIGHT=”100” WIDTH=”50” NAME=”mypic”> [/code]這是一個基礎的HTML影像連結標籤嘛！你只答對了一半，SRC、HEIGHT、WIDTH都是<IMG>標籤的基本屬性，但是「NAME」呢？它是<IMG>標籤的屬性嗎？基本的HTML裡<IMG>標籤裡沒有這個屬性吧！那為什麼在<IMG>標籤裡加上了「NAME」這個奇怪的屬性呢？這是為了讓它成為網頁中的元件，以便我們的JavaScript能夠來操控它，當這個影像有了名字，我們的JavaScript才能呼其「名」來參照使用，如下式：[code]document.mypic //mypic是某一個影像的名稱[/code]既然在<IMG>標籤裡為影像取了名字，而讓這影像成了網頁中JavaScript可控制的元件（如上式中的mypic），既然是JavaScript可控制元件，當然就有了元件的屬性，而影像元件最基礎的屬性就是『SRC（影像檔案）』，透過過這個屬性我們就可以改變<IMG>標籤裡所連結的檔案內容。
[color=Magenta][size=4][b] 實作學習：[/b][/size][/color][code]<HTML>
<HEAD>
<TITLE>影像切換</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
//當滑鼠指標移至圖片上
function inpic()
{
document.mypic.src="bee.gif"
}
//當滑鼠移出圖片
function outpic()
{
document.mypic.src="ari.gif"
}
</SCRIPT>
<IMG SRC="ari.gif" NAME="mypic" onMouseOver="inpic()" onMouseOut="outpic()">
</BODY>
</HTML>[/code][list]
[*]這是一個很基礎的影像變換例子，在原始碼第19行裡，建立了一個圖片的連結，並且將此圖片命名為「mypic」，以便讓它成為我們JavaScript可以操控的網頁元件。在這個<IMG>標籤內還安排了兩個事件處理器「OnMouseOver」與「onMouseOut」。
[*]在網頁載入後，網頁中將出現一個<IMG>標籤預先連結的圖片「ari.gif」，當我們將滑鼠指標移至該圖片上就會觸發「OnMouseOver」事件去呼叫inpic()函式（程式碼第8行），此時函式內的敘述「document.mypic.src="bee.gif"」就將我們網頁中「mypic」圖片元件的連結檔案變更為「bee.gif」，所以你現在所看到的圖片將不再是「ari.gif」，而是「bee.gif」！
[*]然而，在滑鼠指標移出該圖片時，將觸發「OnMouseOut」事件去呼叫outpic()函式（程式碼第13行），此時函式內的敘述「document.mypic.src="ari.gif"」又將我們網頁中「mypic」圖片元件的連結檔案變回「ari.gif」，在滑鼠指標移進與移出圖片時，就產生了所謂的『影像切換效果』。
[/list]
[attach]713[/attach]
[color=Magenta][size=4][b] 進階應用：圖片式小時鐘[/b][/size][/color][code]<HTML>
<HEAD>
<TITLE>圖片式小時鐘</TITLE>
</HEAD>
<SCRIPT Language="JavaScript">
function myclock()
{
//建立日期時間物件
inTime=new Date
//小時
Hour="0"+inTime.getHours()
Hour=Hour.substring(Hour.length-2,Hour.length)
Hour1=Hour.charAt(1)
Hour0=Hour.charAt(0)
//分鐘
Minute="0"+inTime.getMinutes()
Minute=Minute.substring(Minute.length-2,Minute.length)
Minute1=Minute.charAt(1)
Minute0=Minute.charAt(0)
//秒
Second="0"+inTime.getSeconds()
Second=Second.substring(Second.length-2,Second.length)
Second1=Second.charAt(1)
Second0=Second.charAt(0)
//更新網頁中的時間圖片
document.hh1.src=Hour0+".gif"
document.hh2.src=Hour1+".gif"
document.mm1.src=Minute0+".gif"
document.mm2.src=Minute1+".gif"
document.ss1.src=Second0+".gif"
document.ss2.src=Second1+".gif"
//建立動態時間機制
setTimeout("myclock()",1000)
}
</SCRIPT>
<!—網頁載入時呼叫小時鐘函式 -->
<BODY onLoad="myclock()">
<IMG SRC="0.gif" NAME="hh1">
<IMG SRC="0.gif" NAME="hh2">
<IMG SRC="x.gif">
<IMG SRC="0.gif" NAME="mm1">
<IMG SRC="0.gif" NAME="mm2">
<IMG SRC="x.gif">
<IMG SRC="0.gif" NAME="ss1">
<IMG SRC="0.gif" NAME="ss2">
</BODY>
</HTML>[/code][list]
[*]在這個範例中我們預備了11張圖片，阿拉伯數字0至9與分隔符號圖片「：」，請注意，除了分隔符號圖片「：」為x.gif外，阿拉伯數字0至9圖片都是依照數字依序命名，副檔名亦全部相同，如下圖所示：
[attach]714[/attach]
[*]在網頁中我們預定了6個圖片元件，分別代表10位數的小時（Name=”hh1”）、個位數的小時（Name=”hh2”）、10位數的分鐘（Name=”mm1”）、個位數的分鐘（Name=”mm2”）、10位數的秒（Name=”ss1”）、個位數的秒（Name=”ss2”），而時間的分隔符號（：）圖片，則未加以設定（原始碼38至45行）：
[attach]715[/attach]
[*]在<BODY>標籤內，放置了一個OnLoad事件處理器，當網頁載入時即觸發OnLoad事件呼叫myclock()小時鐘函式，開始第一次動態的改變網頁圖片內容（原始碼37行）。
[*]程式碼第9行，利用new建構子建立時間日期物件now()。
[*]程式碼第11、16、21行，利用時間日期物件的方法擷取時間「小時」、時間「分鐘」、時間「秒」，同時，為了顯示"兩位數"的時間格式，所以，若取得的時間數值一律在其前方加上"0"。
[*]程式碼第12、17、22行，利用.substring()方法擷取時間變數的字元長度數值減2與時間變數的字元長度數值間的文字，例如：利用getHours()方法取回的數值為「12」，而我們又在其前方補個「0」，結果就成為「012」，此時，字串長度為3，則substring()方法擷取字串長度減2（3-2=1）與字串長度（3）間的字串資料，則其結果就是『12』。
[*]charAt()方法為取回字串中指定位置的字元，程式碼第13、14、18、19、23、24行。
[*]程式碼第26至31行，更新網頁中影像元的圖片檔案。
[*]程式碼第33行，利用setTimeout()方法重複執行狀態列小時鐘函式。
[/list]
[attach]716[/attach] [color=DarkOrange][size=5][b]影像物件[/b][/size][/color]
在上一節中，我們直接使用改變元件圖片檔案的「SRC」屬性，在網頁中直接的改變圖片檔案，每次進行圖片檔案變更時都會向伺服器索討一次圖片檔案，進行檔案下載的動作，如果在圖片檔案體積不大且網路連結狀況良好，伺服器不忙碌的情況下，圖片的切換動作還算令人滿意，不過，若是圖片檔案體積龐大或網路壅塞的情況時，要看到圖片切換的效果，那就有的等了。所以我們就必須使用預先載入的方式，將要產生交替變換效果的兩個圖片檔案同時下載至瀏覽器中，讓我們要改變顯示的圖片檔案能立刻的在網頁中顯示出來。
要同時將備用的兩個圖片檔案下載至瀏覽器中(客戶端)，我們必須準備「容器」把它裝起來ㄚ，而這個「容器」就是JavaScript的『Image()』影像物件：[code]picbox = new Image()
picbox.src = “ari.gif”[/code]首先，利用new建構子建立一個存放影像的Image()影像物件picbox，同時，使用picbox影像物件的SRC屬性將圖片檔案ari.gif存放進去（事實上是儲存到快取記憶體中，這個圖片檔案並不會出現在網頁中），如此一來，當我們要使用ari.gif這個圖片檔案時，就不必再做下載的動作，直接從picbox影像物件裡拿出來用就行了：[code]document.mypic.src=picbox.src[/code]如上例所示：當我們要替換網頁中mypic的圖片檔案時，直接將picbox內的圖片檔案取出使用即可。
[color=Magenta][size=4][b] 實作學習：[/b][/size][/color]
改寫範例，將兩個做切換的圖片檔案採預存的方式下載至瀏覽器中，作圖片切換的動作時不再向伺服器要求下載檔案。[code]<HTML>
<HEAD>
<TITLE>影像切換</TITLE>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
//建立存放圖片檔案的影像物件
picbox1 = new Image()
picbox2 = new Image()
//將圖片檔案儲存至物件內
picbox1.src="bee.gif"
picbox2.src="ari.gif"
//當滑鼠指標移至圖片上
function inpic()
{
document.mypic.src=picbox1.src
}
//當滑鼠移出圖片
function outpic()
{
document.mypic.src=picbox2.src
}
</SCRIPT>
<IMG SRC="ari.gif" NAME="mypic" onMouseOver="inpic()" onMouseOut="outpic()">
</BODY>
</HTML>[/code]在這個範例中，我們利用new建構子分別建立兩個影像物件：picbox1與picbox2，然後將圖片檔案分別預存到這兩個影像物件裡，當我們需要改變網頁中的圖片時，就直接的自picbox1與picbox2影像物件裡取用圖片檔案。
頁:
[1]