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）。