Rescale Picture Size

自動等比縮放網頁圖片範例解說

如何設定圖片的寬度與高度？

這真是一個最基礎的 HTML 問題，如果你還懷疑，那表示你該回頭翻翻 HTML 參考書了。我們在 HTML 中為 IMG 標籤屬性設定如下，就可以忽略圖片原來尺寸，而指定成我們需要顯示的尺寸：

<IMG SRC="圖片路徑" WIDTH="圖片寬度" HEIGHT="圖片高度" ...>

如何得知圖片原始的高度和寬度？: 前一段範例，雖然能夠要圖片依我們希望的大小顯示出來，但每張圖片原始的寬高度不一，如果通通一個 Size ，勢必最後圖片呈現出來，會有變胖或變瘦的失真現象，而我們真正希望的卻是給一個最大顯示範圍，但實際的顯示寬高度，能依其原始的寬高度來等比縮放。現在問題的重點就是如何得知圖檔原始的寬高度，其實也好簡單啊！網頁是你寫的，圖片也是你選的，你就用圖形軟體查查該圖片的寬高度，再在 HTML 中等比換算一下就可以了。

自行偵測圖片原始的高度和寬度

怎麼？你要開罵啦？好好好，別發火，我們現在就來談如何用 Script 的函式來自動換算圖片等比縮放的新高度和新寬度。不過我們先要有個觀念，網頁可不像 E-Mail 或 Ftp ，可以先把檔案資訊讀回來再做處理，在 Web Page 中，要取得圖片寬高度資訊的惟一辦法就是把圖片下載到網頁中。問題是要重新設定圖片顯示尺寸，就是要維持版面統一美觀，把圖片一放到網頁中，等於就破壞了原本的設計。要解決這種難題，可以有如下方法：

用宣告 "var pic=new Image();pic.src="圖片路徑;" 的方式，用變數取得圖片資訊。
使用 Frameset 組網頁，一個 Frame 當前景，一個 Frame 當背景，在背景 Frame 中下載圖片。
在一個網頁中設定兩個區塊，一個正常顯示，一個用 CSS 設定隱藏起來，並在隱藏區塊中下載圖片。

為使問題簡化，本網頁採用第三種方式。

隱藏區塊的設計

本範例一共下載了五張何處塵埃的 Logo 圖片，並利用 CSS "visibility:hidden;" 屬性讓瀏覽者看不到它們。隱藏區塊設計如下：

<!-- 網頁隱藏區塊，做為背景載入圖片，以供重計算之用。 // -->
<DIV ID="layer2" STYLE="position:absolute;visibility:hidden;">
    <IMG NAME="spic1" SRC="scale01.gif" ALT="圖檔:scale01.gif">
    <IMG NAME="spic2" SRC="scale02.gif" ALT="圖檔:scale02.gif">
    <IMG NAME="spic3" SRC="scale03.gif" ALT="圖檔:scale03.gif">
    <IMG NAME="spic4" SRC="scale04.gif" ALT="圖檔:scale04.gif">
    <IMG NAME="spic5" SRC="scale05.gif" ALT="圖檔:scale05.gif">
</DIV>

顯示區塊的安排

圖片被下載的目的是為了要重新計算寬高後再加以顯示，這在 IE 中是很容易的事，你只要執行 "document.images.圖片名稱.width=新寬度;" 就能讓圖片依新舊尺寸比例，在寬度及長度上等比縮放。但在 NN 上這是行不通的，在 NN 中一旦輸出到網頁上的圖片是沒法再改變顯示尺寸的，所以又回到我們在 NN 中做動態效果的最後法寶，使用 LAYER 改寫元件。(對於如何使用標準 LAYER 改寫元件及擬 LAYER 改寫元件請自行參考 Netscape 中 HTML 標籤擬 LAYER 化一文，因為太常用了，請先熟悉才好。)本範例動態改寫區段設定如下：

<!-- 網頁顯示區塊，做為網頁改寫元件使用，
        z-index:1 是不要讓顯示區塊被隱藏區塊蓋住。 // -->
<DIV ID="layer1" STYLE="position:absolute;z-index:1;">
    <!-- ...... 圖片未完全載入前的顯示訊息 ...... // -->
</DIV>

設定圖片顯示範圍框

為了配合 NN 的使用，我們把所有顯示內容都用 document.write() 到 layer1 顯示區塊中。首先我們要在顯示區塊中保留一個空白區域供圖片顯示之用， Code 如下：

/* 宣告圖片顯示區的長寬及頂點座標 */
var SCALE_WIDTH=160;
var SCALE_HEIGHT=240;
var H_BORDER=24;
var V_BORDER=24;

/* 劃出圖片顯示區函式 */
function AddPictureArea()
{
    var result="";
    /* space8.gif 為一完全通透圖片，目的是遮住未載入圖形時的系統警告圖示。 */
    result+='<IMG SRC="space8.gif" WIDTH='+SCALE_WIDTH;
    result+=' HEIGHT='+SCALE_HEIGHT;
    result+=' BORDER=1 ALIGN=LEFT ALT="圖片載入盒"';
    result+=' HSPACE='+H_BORDER+' VSPACE='+V_BORDER+'>';
    return result;
}

取得隱藏圖片資訊

在圖片顯示區範圍大小確定了後，就要取得隱藏區圖片的尺寸大小及檔案 URL ，以便重新計算顯示比例，因此我設計了下面個 Script 函式，能根據傳入的圖片編號傳回該圖片的寬度、高度及 URL 三項資訊。

/* 取得圖片資訊的自訂函式
   參數 idx 表示選用圖片的編號 */
function GetPictureSource(idx)
{
    var picobj,pass=false;
    /* 依編號還原成 IMG 編籤名稱，俾便做物件名稱呼叫。 */
    var picname="spic"+(idx+1);

    if (document.all) {picobj=document.images[picname];pass=true;}
    if (document.layers) {picobj=document.layers.layer2.document.images[picname];
        pass=true;}
    if (pass)
    {
        /* 要以陣列為回傳值，傳回選取圖片的寬、高及檔案路徑。 */
        var result=new Array();
        result[0]=picobj.width;
        result[1]=picobj.height;
        result[2]=picobj.src;
        return result;
    }
}

重新顯示新尺寸的圖片

取得原圖片相關資訊後，當然就是在改寫區塊把它再顯示出來，本範例還是用 document.write() 輸出字串的方式來設定圖片格式如下：

/* 圖片顯示設定函式 */
function ReScalePictureSize(idx)
{
    /* 傳遞編號給取得圖片資訊自訂函式，並用 picset 變數接收一組陣列回傳值。 */
    var picset=GetPictureSource(idx);
    /* 圖片寬度在回傳陣列的第一個元素裏 */
    var picwidth=picset[0];
    /* 圖片長度在回傳陣列的第二個元素裏 */
    var picheight=picset[1];
    /* 圖片的來源路徑在回傳陣列的第三個元素裏 */
    var picsrc=picset[2];

    /* 以下依圖片顯示區大小重算圖片大小及顯示頂點 */
    var xrate=SCALE_WIDTH/picwidth;
    var yrate=SCALE_HEIGHT/picheight;
    var newrate=(yrate<xrate)?yrate:xrate;
    picwidth*=newrate;
    picwidth=parseInt(picwidth);
    picheight*=newrate;
    picheight=parseInt(picheight);
    newleft=parseInt((SCALE_WIDTH-picwidth)/2)+H_BORDER+1;
    newtop=parseInt((SCALE_HEIGHT-picheight)/2)+V_BORDER+1;

    /* 將計算結果轉為 HTML 的標籤設定字串 */
    var result="";
    result+='<DIV STYLE="position:absolute;'
    result+=' left:'+newleft+'px;top:'+newtop+'px;">'
    result+='<IMG SRC="'+picsrc+'"';
    result+=' WIDTH='+picwidth+' HEIGHT='+picheight+'></DIV>';
    return result;
}

輸出設定到顯示區塊

前面幾個函式都只是用變數去蒐集記錄各項字串設定，最後我們要把所有字串內容加在一起，一次輸出到顯示區塊上，我使用了下面的函式：

/* 把更新後的網頁內容顯示到網頁上函式
   參數 idx 表示要顯示的圖片編號 */
function PushShowString(idx)
{
    var showstring="";
    /* 劃出圖片顯示區 */
    showstring+=AddPictureArea();
    /* 加上說明文件標題 */
    showstring+=AddTextTitle();
    /* 加上說明內文 */
    showstring+=AddTextContent();
    /* 加上圖片選擇器 */
    showstring+=AddPictureSelecter();
    /* 加上圖片顯示設定 */
    showstring+=ReScalePictureSize(idx);

    /* 依瀏覽器不同把網頁內容輸出到網頁部份區塊 */
    if (document.all) {layer1.innerHTML=showstring;
        /* 依傳入之圖片編號設定選取項 */
        document.forms.form1.elements.sel1.selectedIndex=idx;}
    if (document.layers)
    {
        var doc=document.layers.layer1.document;
        doc.open();
        doc.write(showstring);
        doc.close();
        doc.forms.form1.elements.sel1.selectedIndex=idx;
    }
}

這函式中說明文件標題、說明內文和圖片選擇器三個部份函式雖然沒有在本頁說明，但基本原理都一樣，就是傳回相關設定字串，由於與圖片格式設定沒有太大的關係，所以就不在此處浪費篇幅，有興趣你可以自行檢視範例中的原始檔案，上面還是有相關解說的。

範例測試: 嚕嗦了一大篇，總算可以看看成果如何，請按這裡瀏覽，希望效果令你滿意。

回前頁