下面是兩個會隨滑鼠移動轉換圖形的圖形聯結按鈕

何處塵埃導覽> HTML Link Site Link <何處塵埃導覽


範例解說

操作方式
請用滑鼠分別在上方兩個圖形鈕移動及按下，你會發覺圖形鈕在滑鼠移入移出及按下 時，分別會變換不同的色彩，如果你在其中的按鈕按下放開後，網頁將跳往其他超 聯結設定好的網頁。
範例目的
撰寫要點
  1. 由於要用圖形的方式取代純文字超連結，並且要隨滑鼠動作換圖，所以要 用好幾張圖來組成網頁上的一個按鈕，本例按鈕一按鈕用三張圖，分別是 滑鼠移入移出及按下的時候加以換圖。列表如下：

    圖片影像圖片名稱所屬按鈕集使用時機
    HTML Up Button hidup.gif HTML 按鈕 沒有滑鼠動作或滑鼠移出時呈現的圖片
    HTML On Button hidon.gif HTML 按鈕 滑鼠移入時呈現的圖片
    HTML Down Button hiddn.gif HTML 按鈕 滑鼠按下時呈現的圖片
    Site Up Button pidup.gif 分類頁 按鈕 沒有滑鼠動作或滑鼠移出時呈現的圖片
    Site On Button pidon.gif 分類頁 按鈕 滑鼠移入時呈現的圖片
    Site Down Button piddn.gif 分類頁 按鈕 滑鼠按下時呈現的圖片

  2. 既然是按鈕要依滑鼠移入移出換圖，當然 DHTML 的 Script 區段不可少， 我們必須去偵測並處理滑鼠移入(onmouseover)、滑鼠移出(onmouseout)和 滑鼠按下(onmousedown)等三個滑鼠觸發動作。
注意事項
就如前面所說，我們必須要依據滑鼠的三個觸發動作動態更換圖片，這在 Explorer 裏是十分簡單的事，因為 Explorer 的 IMG Tag 可以觸發並接收滑鼠的這些事件，但 Navigator 就比較麻煩，因為它的 IMG Tag 是沒辦法去觸發及接收這些事件的，所以 變通的辦法就是用 Anchor Tag 去包覆 IMG Tag ，因為在 Navigator 裏，Anchor Tag 是可以觸發並接收滑鼠事件，在它接收到滑鼠這些事件後，再在 Script 敘述中去改換 IMG Tag 的圖片。為了做成 IE 和 NC 通用的網頁，我們必須牽就 Navigator ，在 HTML 敘述中我們必須這麼寫： 
<A HREF="LinkURL"
  onmouseout="funcname()"
  onmouseover="funcname()"
  onmousedown="funcname()">
  <IMG SRC="filepathname" NAME="imgname" BORDER="0">
</A>
本範例的 Script 區段
/* 宣告與 HTML 按鈕集圖片相對應的 Image 變數，
並指明其圖形檔之位址。 */
var icon1=new Image();
icon1.src="hidup.gif";

var icon1a=new Image();
icon1a.src="hidon.gif";

var icon1b=new Image();
icon1b.src="hiddn.gif";

/* 宣告與 分類頁 按鈕集圖片相對應的 Image 變數，
並指明其圖形檔之位址。 */
var icon2=new Image();
icon2.src="pidup.gif";

var icon2a=new Image();
icon2a.src="pidon.gif";

var icon2b=new Image();
icon2b.src="piddn.gif";

/* 執行更換 IMG Tag 圖片的 JavaScript 自訂函數
參數功能：
imgname:指明要更換那一個 IMG Tag
gifname:要更換成那個圖形的變數名稱
*/
function MouseThrow(imgname,gifname)
{
    /* 如果 IE or NC 在 4.0 以上才執行 */
    if (navigator.appVersion.substring(0,1) >= 4)
    {
        /* Img Tag 的 src 屬性就是圖片的所在位址，改變 src 
           即可達成更換圖片的效果。 */
        document.images[imgname].src=eval(gifname+".src");
    }
    else
    {
        alert("!!抱歉!!\n你必須使用 IE or NC 4.0 以上的瀏覽器");
    }
}
本範例的 HTML 區段

<H3 ALIGN=CENTER>下面是兩個會隨滑鼠移動轉換圖形的圖形聯結按鈕</H3>
<TABLE ALIGN=CENTER><TR>
    <TD><B>何處塵埃導覽></B></TD>
    <TD>
    <!-- 這是 HTML 按鈕的設定，事件處理是寫在 Anchor 標籤裏，
            而不是 IMG 標籤裏 -->
    <A HREF="../../index.htm"
        onmouseout="MouseThrow('button1','icon1')"
        onmouseover="MouseThrow('button1','icon1a')"
        onmousedown="MouseThrow('button1','icon1b')">

    <!-- NAME 屬性是設給 IMG 而不是 Anchor，表示要在 Script 
            區段裏改變的是 IMG 而不是 Anchor 。 -->
    <IMG NAME="button1" SRC="hidup.gif" BORDER="0"></A>
    </TD>
    <TD>

    <!-- 這是 分類頁 按鈕的設定 -->
    <A HREF="../../../partexp.htm"
        onmouseout="MouseThrow('button2','icon2')"
        onmouseover="MouseThrow('button2','icon2a')"
        onmousedown="MouseThrow('button2','icon2b')">
    <IMG NAME="button2" SRC="pidup.gif" BORDER="0"></A>
    </TD>
    <TD><B><何處塵埃導覽</B></TD>
</TR></TABLE>

打包下載，離線閱讀。



何處塵埃導覽> HTML Link Site Link <何處塵埃導覽
1