Board logo

標題: [教學] (教學第25篇)影像物件 上篇 [打印本頁]
作者: 小誌    時間: 2010-5-19 02:16     標題: (教學第25篇)影像物件 上篇

網頁中的影像(圖片)在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>

  19. <IMG SRC="ari.gif" NAME="mypic" onMouseOver="inpic()" onMouseOut="outpic()">
  20. </BODY>
  21. </HTML>
複製代碼

[attach]713[/attach]


進階應用：圖片式小時鐘
  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>
複製代碼

[attach]716[/attach]
作者: 小誌    時間: 2010-5-19 02:19

影像物件
在上一節中，我們直接使用改變元件圖片檔案的「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"

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

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



歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)