Adaptive Image Size pop-up window _ image effects

In the adaptive image size pop-up window, we often need to provide this function to visitors: When a visitor clicks a thumbnail on the page, the corresponding full-size image is displayed in a new pop-up window for visitors to view.

The simplest way to implement this function is to use the following HTML code to create an image link:
　　
The marked href attribute specifies the URL of the full-size image, and the target attribute is set to _ blank to display the image in a new window; The Marked src attribute specifies the URL of the thumbnail.

If you want to control the appearance of a window that displays a full-size image (for example, if you want the height and width of the window to match the size of the full-size image), you can call the window. open method. This method receives three parameters, respectively specifying the URL, window name, and window properties of the file to be opened. You can specify the window height and width in the window property parameters, whether to display the menu bar and toolbar. The following code displays a full-size image in a window without a toolbar, address bar, Status Bar, and menu bar. The width and height are 400 and 350 respectively:


This raises a question. If all full-size images have a uniform size (for example, 400x350 ), the above Code applies to all the thumbnail links (only the full-size image file pointed to by the href attribute is different ). However, if the size of the full-size image is not uniform and the above code is used, we need to first obtain the size of each full-size image, and then in the window. in the window property parameters of the open method, the values of height and width are set to the correct values. When the number of images is large, the efficiency is obviously too low. Is there a permanent way to enable the pop-up window to 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 goal. The Image object can dynamically load the specified Image and obtain the size of the loaded Image by reading its width and height attributes, in this way, you can set the size of the pop-up window to adjust the image size. The following is the implementation code: