2019年6月20日 星期四

(24)影像物件 上篇

網頁中的影像(圖片)在JavaScript是將其視為一個網頁元件!影像是一個網頁中的元件?這麼說來,JavaScript不就可以隨意的操控它?沒錯!只要你在圖片連結標籤<IMG>中定義該連結圖片的名稱(NAME屬性),那麼要變換圖片連結標籤裡的圖片、或者是令圖片產生變換的效果,通通都是輕易的事,短短的幾行程式敘述,就可以造就出驚人的效果!

基礎的影像控制
請你先瞧一瞧下列這行HTML標籤:
  1. <IMG SRC=”bg.gif” HEIGHT=”100” WIDTH=”50” NAME=”mypic”>
這是一個基礎的HTML影像連結標籤嘛!你只答對了一半,SRC、HEIGHT、WIDTH都是<IMG>標籤的基本屬性,但是「NAME」呢?它是<IMG>標籤的屬性嗎?基本的HTML裡<IMG>標籤裡沒有這個屬性吧!那為什麼在<IMG>標籤裡加上了「NAME」這個奇怪的屬性呢?這是為了讓它成為網頁中的元件,以便我們的JavaScript能夠來操控它,當這個影像有了名字,我們的JavaScript才能呼其「名」來參照使用,如下式:
  1. document.mypic    //mypic是某一個影像的名稱
既然在<IMG>標籤裡為影像取了名字,而讓這影像成了網頁中JavaScript可控制的元件(如上式中的mypic),既然是JavaScript可控制元件,當然就有了元件的屬性,而影像元件最基礎的屬性就是『SRC(影像檔案)』,透過過這個屬性我們就可以改變<IMG>標籤裡所連結的檔案內容。


實作學習:
  1. <HTML>
  2. <HEAD>
  3. <TITLE>影像切換</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <SCRIPT Language="JavaScript">
  7. //當滑鼠指標移至圖片上
  8. function inpic()
  9. {
  10. document.mypic.src="bee.gif"
  11. }
  12. //當滑鼠移出圖片
  13. function outpic()
  14. {
  15. document.mypic.src="ari.gif"
  16. }
  17. </SCRIPT>

  18. <IMG SRC="ari.gif" NAME="mypic" onMouseOver="inpic()" onMouseOut="outpic()">
  19. </BODY>
  20. </HTML>
  • 這是一個很基礎的影像變換例子,在原始碼第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」,在滑鼠指標移進與移出圖片時,就產生了所謂的『影像切換效果』。 

進階應用:圖片式小時鐘
  1. <HTML>
  2. <HEAD>
  3. <TITLE>圖片式小時鐘</TITLE>
  4. </HEAD>
  5. <SCRIPT Language="JavaScript">
  6. function myclock()
  7. {
  8. //建立日期時間物件
  9. inTime=new Date
  10. //小時
  11. Hour="0"+inTime.getHours()
  12. Hour=Hour.substring(Hour.length-2,Hour.length)
  13. Hour1=Hour.charAt(1)
  14. Hour0=Hour.charAt(0)
  15. //分鐘
  16. Minute="0"+inTime.getMinutes()
  17. Minute=Minute.substring(Minute.length-2,Minute.length)
  18. Minute1=Minute.charAt(1)
  19. Minute0=Minute.charAt(0)
  20. //秒
  21. Second="0"+inTime.getSeconds()
  22. Second=Second.substring(Second.length-2,Second.length)
  23. Second1=Second.charAt(1)
  24. Second0=Second.charAt(0)
  25. //更新網頁中的時間圖片
  26. document.hh1.src=Hour0+".gif"
  27. document.hh2.src=Hour1+".gif"
  28. document.mm1.src=Minute0+".gif"
  29. document.mm2.src=Minute1+".gif"
  30. document.ss1.src=Second0+".gif"
  31. document.ss2.src=Second1+".gif"
  32. //建立動態時間機制
  33. setTimeout("myclock()",1000)
  34. }
  35. </SCRIPT>
  36. <!—網頁載入時呼叫小時鐘函式 -->
  37. <BODY onLoad="myclock()">
  38. <IMG SRC="0.gif" NAME="hh1">
  39. <IMG SRC="0.gif" NAME="hh2">
  40. <IMG SRC="x.gif">
  41. <IMG SRC="0.gif" NAME="mm1">
  42. <IMG SRC="0.gif" NAME="mm2">
  43. <IMG SRC="x.gif">
  44. <IMG SRC="0.gif" NAME="ss1">
  45. <IMG SRC="0.gif" NAME="ss2">
  46. </BODY>
  47. </HTML>
  • 在這個範例中我們預備了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()』影像物件:
  1. picbox = new Image()
  2. picbox.src = “ari.gif”
首先,利用new建構子建立一個存放影像的Image()影像物件picbox,同時,使用picbox影像物件的SRC屬性將圖片檔案ari.gif存放進去(事實上是儲存到快取記憶體中,這個圖片檔案並不會出現在網頁中),如此一來,當我們要使用ari.gif這個圖片檔案時,就不必再做下載的動作,直接從picbox影像物件裡拿出來用就行了:
  1. document.mypic.src=picbox.src
如上例所示:當我們要替換網頁中mypic的圖片檔案時,直接將picbox內的圖片檔案取出使用即可。

實作學習:
改寫範例,將兩個做切換的圖片檔案採預存的方式下載至瀏覽器中,作圖片切換的動作時不再向伺服器要求下載檔案。
  1. <HTML>
  2. <HEAD>
  3. <TITLE>影像切換</TITLE>
  4. </HEAD>
  5. <BODY>
  6. <SCRIPT Language="JavaScript">
  7. //建立存放圖片檔案的影像物件
  8. picbox1 = new Image()
  9. picbox2 = new Image()
  10. //將圖片檔案儲存至物件內
  11. picbox1.src="bee.gif"
  12. picbox2.src="ari.gif"

  13. //當滑鼠指標移至圖片上
  14. function inpic()
  15. {
  16. document.mypic.src=picbox1.src
  17. }
  18. //當滑鼠移出圖片
  19. function outpic()
  20. {
  21. document.mypic.src=picbox2.src
  22. }
  23. </SCRIPT>

  24. <IMG SRC="ari.gif" NAME="mypic" onMouseOver="inpic()" onMouseOut="outpic()">
  25. </BODY>
  26. </HTML>
在這個範例中,我們利用new建構子分別建立兩個影像物件:picbox1與picbox2,然後將圖片檔案分別預存到這兩個影像物件裡,當我們需要改變網頁中的圖片時,就直接的自picbox1與picbox2影像物件裡取用圖片檔案。

沒有留言:

張貼留言