JavaScript: onMouse與Function


約瑟 發表



這次的教學跟上一次的很像, 都是應用 onMouseOver 和 onMouseOut 兩個指令。 不過, 這次要和 Function 一起合作, 而不是用標籤來作. 我們用 onMouseOut 和 onMouseOver 來呼叫我們設定的 Function。

普遍來說, 假使你只需要一個 JavaScript 指令, 你可以用 標籤來呼叫。 要是我們要很多 JavaScript 的指令, 就要用 Function 來呼叫。



STEP1:【程式範例】
  1. 以下是這個範例的程式碼:

    <HTML>
    <HEAD>
    <title>JavaScript Example</title>
    <SCRIPT LANGUAGE="JavaScript">
    function up()
    {
    document.mypic.src="examples/javascript/13off.jpg"
    }
    function down()
    {
    document.mypic.src="examples/javascript/13on.jpg"
    }
    </SCRIPT>
    </HEAD>
    <BODY>
    <CENTER>
    <h2>Sample Animation</h2>

    <A HREF="http://come.to/Joseph2001"
    onMouseOver="up()" onMouseOut="down()">
    <IMG SRC="examples/javascript/13on.jpg" NAME="mypic" BORDER=0>
    </BODY>
    </HTML>



STEP2:【程式說明】
  1. onMouseOver 和 onMouseOut 都是非常敏感的指令。 我會繼續提醒大家, 以防你們忘記。
  2. 注意到, 在 <HEAD> 裡面的程式有包含兩個 Functions:
    <SCRIPT LANGUAGE="JavaScript">
    function up()
    {
    document.mypic.src="13off.jpg"
    }
    function down()
    {
    document.mypic.src="13on.jpg"
    }
    </SCRIPT>
    Functions 都是用一樣的表現方式。 還記得前幾章教過的 "JavaScript的等級介紹" 嗎? document 是最大的。 再來是 object。 最後是 SRC。 還有, 有沒有注意到 function 的名稱是 "up()" 和 "down()"?
  3. 現在我們來看看 Function 的呼叫:

    <A HREF="http://come.to/Joseph2001" onMouseOver="up()" onMouseOut="down()">
    <IMG SRC="13on.jpg" NAME="mypic" BORDER=0></A>

    這段幾乎可以說是跟前一章一樣的語法。 不過我們用 Function 來代替 HREF。
  4. 不過這個例子只有用到 "一個" JavaScript 語法而已。 還記得我們通常有很多語法要呼叫時才需要用到 function。 我只是想舉一個短一點的例子而已。
  5. 假如你決定要加多一點的語法呼叫, 要記得另外作一個 function name, 還有要記得把特定的圖片裡面 的 NAME 更改一下。 舉個例子: 我們想要放另一個像之前的東化在網頁上。你一定要寫另一個 Function, 只要把之前的複製起來貼上(下面程式碼有說明)。接下來要記得把所有 Function 的 NAME 都改過。我們就把他改成 "mypic2" 好了。一定要記得改 Function 的 NAME。現在, 看看下面的程式碼:
    <SCRIPT LANGUAGE="JavaScript">

    function up()
    {
       document.mypic.src="13off.jpg"
    }

    function down()
    {
       document.mypic.src="13on.jpg"
    }

    function up2()
    {
       document.mypic2.src="13off.jpg"
    }

    function down2()
    {
       document.mypic2.src="13on.jpg"
    }

    </SCRIPT>

    ...然後用下面這段語法來呼叫上面的 Function:

    <A HREF="http://www.htmlgoodies.com"
    onMouseOver="up()" onMouseOut="down()">
    <IMG SRC="down.gif" NAME="mypic"
    BORDER=0></A>

    <a href="http://come.to/Joseph2001"
    onMouseOver="up2()" onMouseOut="down2()">
    <IMG SRC="13off.gif" NAME="mypic2"
    BORDER=0></A>

    把這個程式碼試看看, 結果有沒有和你想的一樣呢? 只要記得改 Function 的 NAME, 錯誤率就比較低了。

    最後更新日期: 7/9/2001 10:29:28 AM