基礎的影像控制
請你先瞧一瞧下列這行HTML標籤：
這是一個基礎的HTML影像連結標籤嘛！你只答對了一半，SRC、HEIGHT、WIDTH都是<IMG>標籤的基本屬性，但是「NAME」呢？它是<IMG>標籤的屬性嗎？基本的HTML裡<IMG>標籤裡沒有這個屬性吧！那為什麼在<IMG>標籤裡加上了「NAME」這個奇怪的屬性呢？這是為了讓它成為網頁中的元件，以便我們的JavaScript能夠來操控它，當這個影像有了名字，我們的JavaScript才能呼其「名」來參照使用，如下式：
既然在<IMG>標籤裡為影像取了名字，而讓這影像成了網頁中JavaScript可控制的元件（如上式中的mypic），既然是JavaScript可控制元件，當然就有了元件的屬性，而影像元件最基礎的屬性就是『SRC（影像檔案）』，透過過這個屬性我們就可以改變<IMG>標籤裡所連結的檔案內容。
實作學習：
- 這是一個很基礎的影像變換例子，在原始碼第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」，在滑鼠指標移進與移出圖片時，就產生了所謂的『影像切換效果』。
進階應用：圖片式小時鐘
- 在這個範例中我們預備了11張圖片，阿拉伯數字0至9與分隔符號圖片「：」，請注意，除了分隔符號圖片「：」為x.gif外，阿拉伯數字0至9圖片都是依照數字依序命名，副檔名亦全部相同。
- 在網頁中我們預定了6個圖片元件，分別代表10位數的小時（Name=”hh1”）、個位數的小時（Name=”hh2”）、10位數的分鐘（Name=”mm1”）、個位數的分鐘（Name=”mm2”）、10位數的秒（Name=”ss1”）、個位數的秒（Name=”ss2”），而時間的分隔符號（：）圖片，則未加以設定（原始碼38至45行）。
- 在<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()方法重複執行狀態列小時鐘函式。
影像物件
在上一節中，我們直接使用改變元件圖片檔案的「SRC」屬性，在網頁中直接的改變圖片檔案，每次進行圖片檔案變更時都會向伺服器索討一次圖片檔案，進行檔案下載的動作，如果在圖片檔案體積不大且網路連結狀況良好，伺服器不忙碌的情況下，圖片的切換動作還算令人滿意，不過，若是圖片檔案體積龐大或網路壅塞的情況時，要看到圖片切換的效果，那就有的等了。所以我們就必須使用預先載入的方式，將要產生交替變換效果的兩個圖片檔案同時下載至瀏覽器中，讓我們要改變顯示的圖片檔案能立刻的在網頁中顯示出來。
要同時將備用的兩個圖片檔案下載至瀏覽器中(客戶端)，我們必須準備「容器」把它裝起來ㄚ，而這個「容器」就是JavaScript的『Image()』影像物件：
首先，利用new建構子建立一個存放影像的Image()影像物件picbox，同時，使用picbox影像物件的SRC屬性將圖片檔案ari.gif存放進去（事實上是儲存到快取記憶體中，這個圖片檔案並不會出現在網頁中），如此一來，當我們要使用ari.gif這個圖片檔案時，就不必再做下載的動作，直接從picbox影像物件裡拿出來用就行了：
如上例所示：當我們要替換網頁中mypic的圖片檔案時，直接將picbox內的圖片檔案取出使用即可。
實作學習：
改寫範例，將兩個做切換的圖片檔案採預存的方式下載至瀏覽器中，作圖片切換的動作時不再向伺服器要求下載檔案。
在這個範例中，我們利用new建構子分別建立兩個影像物件：picbox1與picbox2，然後將圖片檔案分別預存到這兩個影像物件裡，當我們需要改變網頁中的圖片時，就直接的自picbox1與picbox2影像物件裡取用圖片檔案。
在上一節中，我們直接使用改變元件圖片檔案的「SRC」屬性，在網頁中直接的改變圖片檔案，每次進行圖片檔案變更時都會向伺服器索討一次圖片檔案，進行檔案下載的動作，如果在圖片檔案體積不大且網路連結狀況良好，伺服器不忙碌的情況下，圖片的切換動作還算令人滿意，不過，若是圖片檔案體積龐大或網路壅塞的情況時，要看到圖片切換的效果，那就有的等了。所以我們就必須使用預先載入的方式，將要產生交替變換效果的兩個圖片檔案同時下載至瀏覽器中，讓我們要改變顯示的圖片檔案能立刻的在網頁中顯示出來。
要同時將備用的兩個圖片檔案下載至瀏覽器中(客戶端)，我們必須準備「容器」把它裝起來ㄚ，而這個「容器」就是JavaScript的『Image()』影像物件：
首先，利用new建構子建立一個存放影像的Image()影像物件picbox，同時，使用picbox影像物件的SRC屬性將圖片檔案ari.gif存放進去（事實上是儲存到快取記憶體中，這個圖片檔案並不會出現在網頁中），如此一來，當我們要使用ari.gif這個圖片檔案時，就不必再做下載的動作，直接從picbox影像物件裡拿出來用就行了：
如上例所示：當我們要替換網頁中mypic的圖片檔案時，直接將picbox內的圖片檔案取出使用即可。
實作學習：
改寫範例，將兩個做切換的圖片檔案採預存的方式下載至瀏覽器中，作圖片切換的動作時不再向伺服器要求下載檔案。
在這個範例中，我們利用new建構子分別建立兩個影像物件：picbox1與picbox2，然後將圖片檔案分別預存到這兩個影像物件裡，當我們需要改變網頁中的圖片時，就直接的自picbox1與picbox2影像物件裡取用圖片檔案。
沒有留言:
張貼留言