返回列表 上一主題 發帖

[教學] (教學第25篇)影像物件 上篇

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-23 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
1# 跳轉到 » 倒序看帖
打印
tT
發表於 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>
複製代碼

  • 這是一個很基礎的影像變換例子，在原始碼第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圖片都是依照數字依序命名，副檔名亦全部相同，如下圖所示：
    10-2.png
  • 在網頁中我們預定了6個圖片元件，分別代表10位數的小時（Name=”hh1”）、個位數的小時（Name=”hh2”）、10位數的分鐘（Name=”mm1”）、個位數的分鐘（Name=”mm2”）、10位數的秒（Name=”ss1”）、個位數的秒（Name=”ss2”），而時間的分隔符號（：）圖片，則未加以設定（原始碼38至45行）：
    10-4.png
  • 在<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()方法重複執行狀態列小時鐘函式。

收藏 分享
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

小誌
　暱稱: 小誌
　頭銜: 曾經也是水電工

管理員Rank: 9Rank: 9Rank: 9

帖子
1190 
主題
394 
精華
113 
積分
1747 
點名
1  
作業系統
Vista 
軟體版本
Office 2003 
閱讀權限
200 
性別
男 
來自
台灣 
註冊時間
2010-5-1 
最後登錄
2024-11-23 

2021牛年全勤獎章好學求知勳章熱烈參與勳章2017 雞年全勤獎章2018 狗年全勤獎章2019 豬年全勤獎章2020鼠年全勤獎章
2#
發表於 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影像物件裡取用圖片檔案。
心安，平安   
發表任何無意義的感謝或灌水文章一律砍,珍惜帳號,請詳閱版規!!

TOP

        靜思自在 : 忘功不忘過，忘怨不忘恩。
返回列表 上一主題