彈出小視窗,並自動調整成適合圖片的視窗大小(二)
範例

Preview Big Picture     Preview Small Picture

使用 JavaScript 程式後,可依據該圖檔實際大自動縮放適合該圖片尺寸的彈出視窗。
你也可以在此圖檔上使用滑鼠右鍵,選擇內容,查看你伸縮過的尺寸。
開啟方式:以圖片直接開啟,設有關閉視窗功能。
優點:如果你使用得是各類大小不一的圖片,你不用逐一設定彈出視窗尺寸,非常實用。
使用 JavaScript 程式如下:
<script language="JavaScript" type="text/javascript">
// Set the horizontal and vertical position for the popup

PositionX = 100;
PositionY = 100;

// Set these value approximately 20 pixels greater than the
// size of the largest image to be used (needed for Netscape)

defaultWidth  = 500;
defaultHeight = 500;

// Set autoclose true to have the window close automatically
// Set autoclose false to allow multiple popup windows

var AutoClose = true;

// Do not edit below this line...
// ================================
if(parseInt(navigator.appVersion.charAt(0))>=4)
{
	var isNN=(navigator.appName=="Netscape")?1:0;
	var isIE=(navigator.appName.indexOf("Microsoft")!=-1)?1:0;}
	var optNN='scrollbars=no,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY;
	var optIE='scrollbars=no,width=150,height=100,left='+PositionX+',top='+PositionY;
	function popImage(imageURL,imageTitle)
	{
		if (isNN)
		{
			imgWin=window.open('about:blank','',optNN);
		}
		if (isIE)
		{
			imgWin=window.open('about:blank','',optIE);
		}
		with (imgWin.document)
		{
                .............
                略
                .............
		close();
	}
}
</script>

<BODY onresize="resize();">
<a href="javascript:popImage('pics/pic01.jpg', 'Image Preview');">Preview Big Picture</a>
本報導資料來源:Twelvestone Forums

請按瀏覽器的檢視原始碼查看