很多時候我們需要提供這樣的功能給訪問者：當訪問者點擊頁面中的縮圖時，其對應的全尺寸圖片將顯示在一個新的快顯視窗中供訪問者查看。
實現此功能的最簡單作法是用以下HTML代碼建立一個映像連結：
<a href="http://www.webjx.com/htmldata/2005-02-25/fullsize.jpg" target="_blank"><img src="http://www.webjx.com/htmldata/2005-02-25/small.jpg"></a>
其中<a>標記的href屬性指定全尺寸圖片的URL，target屬性設定為_blank指定在新視窗中顯示該圖片；<img>標記的src屬性指定縮圖的URL。
如果我們想對顯示全尺寸圖片的視窗的外觀進行某些控制（比如希望快顯視窗的高度、寬度能與全尺寸圖片的大小匹配時），則可調用 window.open 方法，該方法接收三個參數，分別指定要開啟檔案的URL，視窗名及視窗特性，在視窗特性參數中可指定視窗的高度、寬度，是否顯示功能表列、工具列等。以下代碼將顯示全尺寸圖片在一個沒有工具列、地址欄、狀態列、功能表列，寬、高分別為400、350的視窗中：
<a href="http://www.webjx.com/htmldata/2005-02-25/fullsize.jpg" ><img src="http://www.webjx.com/htmldata/2005-02-25/small.jpg"></a>
這裡就提出了個問題，如果所有全尺寸圖片都具有統一的大小（比如都是400x350），那麼以上代碼適用於所有的縮圖片連結（只是href屬性指向的全尺寸圖片檔案不同）。但如果全尺寸圖片的大小並不統一，還用以上代碼則我們需要先取得每幅全尺寸圖片的大小，然後在window.open方法的視窗特性參數中一一設定height和width為正確的值，在圖片數量較多的情況下，這顯然效率太低了。那麼是否有一勞永逸的方法，即讓快顯視窗能自動適應要顯示圖片的大小？通過研究，發現可以使用 DHTML 中的 Image 對象來達到我們的目的，Image 對象可動態裝載指定的圖片，通過讀取其 width 和 height 屬性即能獲得裝入圖片的大小，以此來設定快顯視窗的大小，即可實現自適應圖片大小的快顯視窗了。下面即是實現代碼:
<script language="JavaScript" type="text/JavaScript">
<!--
var imgObj;
function checkImg(theURL,winName){
// 對象是否已建立
if (typeof(imgObj) == "object"){
// 是否已取得了映像的高度和寬度
if ((imgObj.width != 0) && (imgObj.height != 0))
// 根據取得的映像高度和寬度設定快顯視窗的高度與寬度，並開啟該視窗
// 其中的增量 20 和 30 是設定的視窗邊框與圖片間的間隔量
OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30));
else
// 因為通過 Image 對象動態裝載圖片，不可能立即得到圖片的寬度和高度，所以每隔100毫秒重複調用檢查
setTimeout("checkImg(" + theURL + "," + winName + ")", 100)
}
}
function OpenFullSizeWindow(theURL,winName,features) {
var aNewWin, sBaseCmd;
// 快顯視窗外觀參數
sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,";
// 調用是否來自 checkImg
if (features == null || features == ""){
// 建立映像對象
imgObj = new Image();
// 設定映像源
imgObj.src = theURL;
// 開始擷取映像大小
checkImg(theURL, winName)
}
else{
// 開啟視窗
aNewWin = window.open(theURL,winName, sBaseCmd + features);
// 聚焦視窗
aNewWin.focus();
}
}
//-->
</script>
使用時將上面的代碼放在網頁文檔的<head></head>標記對中，然後在連結的點擊事件中調用OpenFullSizeWindow函數，如<a href="http://www.webjx.com/htmldata/2005-02-25/fullsize.jpg" ><img src="http://www.webjx.com/htmldata/2005-02-25/small.jpg"></a>即可。
以上代碼在IE 5.x－6.0中測試通過。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
