Dynamic HTML (I)

Dynamic HTML (I)

---

範例：請將滑鼠移到範例中藍色的圓圈上，你會發現他會變成紅色圓圈。當你把滑鼠移出，又會回到藍色的圓圈。 : onMouseOver

---

原始碼：

<script language="javascript">
<!--
  // 預載 images
  if(document.images)
  {
    img_on = new Image(); img_on.src="/~jlu/gifs/redball.gif";
    img_off = new Image(); img_off.src="/~jlu/gifs/blueball.gif";
  }

  function flip(pic)
  {
    if(pic == 1)
      document.mypic.src=img_on.src;
    else
      document.mypic.src=img_off.src;
  }
// -->
</script>

---

說明：這個範例中，牽涉到的觀念有：事件處理（含 onMouseOver 和 onMouseOut）以及 網頁的 DOM 架構以及其處理方式。

• 首先，我們先看 HTML 元件的部分，其原始碼如下：

  <img name="mypic" border="0" src="/~jlu/gifs/blueball.gif"
   onMouseOut="flip(2);" onMouseOver="flip(1);"/>
  

  該元件是一個圖形元件（也就是藍色的球），而且該元件包含兩個事件：一個是當 滑鼠進入該元件時會觸發的 onMouseOver 事件，另一個是當滑鼠離開該元件時會觸發的 onMouseOut 事件。從原始碼中，我們可以看出，當滑鼠進入的時候，瀏覽器會執行 flip(1)，而離開的時候，會執行 flip(2)。
• 設計這個範例的時候，我們希望剛開啟網頁的時候，藍色的球（也可以使用其他 的圖）會出現，這個部分已經定義在 <img> 內；而當滑鼠進入元件的時候， 會出現紅色的球；然後，當滑鼠離開元件的時候，又會恢復藍色的球。依據這樣的 設計，當 onMouseOver 事件被觸發時，flip(1) 的目標就是把藍色的球換成 紅色的球；也就是說，程式需要把 <img> 標籤內 src 的值從 /~jlu/gifs/blueball.gif 改成 /~jlu/gifs/redball.gif。 為了能夠快速的呈現不同的圖形，我們必須在網頁載入的時候先把圖形也載入，而 為了完成這個目的，我們定義了如下的程式碼：
  

    if(document.images)
    {
      img_on = new Image(); img_on.src="/~jlu/gifs/redball.gif";
      img_off = new Image(); img_off.src="/~jlu/gifs/blueball.gif";
    }
  

  這一段程式碼會在網頁載入的時候就執行。這段程式碼先檢查網頁中（document 物件）是否有任何的 <img> 標籤（images 物件），如果有，則 產生 Image 物件。從程式碼中，我們看到程式總共產生了兩個 Image 物件， 分別是 img_on 和 img_off，而且分別代表 redball.gif 和 blueball.gif。
• 完成了 Image 物件的載入之後，我們就可以解釋 flip() 函數了。當 onMouseOver 事件被觸發時，瀏覽器將參數 1 傳給 flip()；而依據下列的 程式碼：

    function flip(pic)
    {
      if(pic == 1)
        document.mypic.src=img_on.src;
      else
        document.mypic.src=img_off.src;
    }
  

  我們會把 img_on.src 的值（也就是 redball.gif）指定給 document.mypic.src。 document.mypic.src 的用法就像之前介紹的 DOM 或者 Javascript 的物件架構圖 一樣，一個 HTML 的網頁由 document 物件代表；而 document.mypic 指的是 在網頁內名為 mypic 的物件；請再次看一下 <img> 標籤，我們為它 定義了一個 name 屬性，而它的值為 mypic。name 屬性的 目的在於為其相對應的標籤定義一個名稱，有了名稱我們就可以利用 document.名稱 的方式取得該物件。最後，document.mypic.src 即代表 <img> 標籤的 src。經由這樣的指定，<img> 標籤的 src 值 就從 blueball.gif 變成 redball.gif；而在網頁上的效果就是從藍色的球 變成紅色的球。利用 Javascript 我們可以"動態"的改變 HTML 的內容，所以這一類 的作法又稱為 DHTML（Dynamic HTML；動態 HTML）。

---