Pop-up window that adapts to image size_Image special effects

Many times we need to provide this function to visitors: when a visitor clicks on a thumbnail on the page, the corresponding full-size image will be displayed in a new pop-up window for the visitor to view.

The simplest way to implement this feature is to create an image link with the following HTML code:

Where the href attribute of the tag specifies the full-size image The URL, the target attribute is set to _blank to specify that the image is displayed in a new window; the src attribute of the tag specifies the URL of the thumbnail.

If we want to have some control over the appearance of the window that displays the full-size image (for example, if we want the height and width of the pop-up window to match the size of the full-size image), we can call the window.open method, This method receives three parameters, which specify the URL of the file to be opened, the window name and the window properties. In the window property parameters, you can specify the height and width of the window, whether to display the menu bar, toolbar, etc. The following code will display a full-size image in a window with no toolbar, address bar, status bar, or menu bar, with width and height of 400 and 350 respectively:


A question is raised here. If all full-size images have a uniform size (for example, 400x350), then the above code applies to all thumbnail image links (only the full-size image files pointed to by the href attribute are different). But if the sizes of the full-size pictures are not uniform, if we still use the above code, we need to first obtain the size of each full-size picture, and then set the height and width to the correct values ​​one by one in the window property parameters of the window.open method. This is obviously too inefficient when the number of images is large. So is there a permanent way to make the pop-up window automatically adapt to the size of the image to be displayed? Through research, we found that we can use the Image object in DHTML to achieve our purpose. The Image object can dynamically load the specified image. By reading its width and height attributes, we can get the size of the loaded image, so as to set the size of the pop-up window. Size, you can realize a pop-up window that adapts to the image size. The following is the implementation code:

When using it, place the above code in the tag pair of the web document, and then call the OpenFullSizeWindow function in the click event of the link. Such as
. <script> <BR><!-- <BR>var imgObj; <BR>function checkImg(theURL,winName){ <BR>// 对象是否已创建 <BR>if (typeof(imgObj) == "object"){ <BR>// 是否已取得了图像的高度和宽度 <BR>if ((imgObj.width != 0) && (imgObj.height != 0)) <BR>// 根据取得的图像高度和宽度设置弹出窗口的高度与宽度，并打开该窗口 <BR>// 其中的增量 20 和 30 是设置的窗口边框与图片间的间隔量 <BR>OpenFullSizeWindow(theURL,winName, ",width=" + (imgObj.width+20) + ",height=" + (imgObj.height+30)); <BR>else <BR>// 因为通过 Image 对象动态装载图片，不可能立即得到图片的宽度和高度，所以每隔100毫秒重复调用检查 <BR>setTimeout("checkImg('" + theURL + "','" + winName + "')", 100) <BR>} <BR>} <br><br>function OpenFullSizeWindow(theURL,winName,features) { <BR>var aNewWin, sBaseCmd; <BR>// 弹出窗口外观参数 <BR>sBaseCmd = "toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,"; <BR>// 调用是否来自 checkImg <BR>if (features == null || features == ""){ <BR>// 创建图像对象 <BR>imgObj = new Image(); <BR>// 设置图像源 <BR>imgObj.src = theURL; <BR>// 开始获取图像大小 <BR>checkImg(theURL, winName) <BR>} <BR>else{ <BR>// 打开窗口 <BR>aNewWin = window.open(theURL,winName, sBaseCmd + features); <BR>// 聚焦窗口 <BR>aNewWin.focus(); <BR>} <BR>} <BR>//--> <BR></script> The above code has been tested in IE 5.x-6.0.