Many times we need to provide such a feature to visitors: When the visitor clicks on the thumbnail in the page, its corresponding full-size picture will be displayed in a new pop-up window for visitor viewing.
The easiest way to implement this feature is to create an image link with the following HTML code: The marked HREF property specifies the URL of the full-size picture, and the target property is set to _blank specifying the image in a new window;
tagged SRC property Specifies the URL of the thumbnail.
If we want to perform some controls on the appearance of the window displaying the full-size picture (such as the height of the pop-up window, the width can match the size of the full-size picture), then the Window.Open method can be called, the method receives three parameters. , Specify the URL, window name, window characteristics to open files, window names, and window features, in the window characteristic parameter, can specify the height, width of the window, whether to display the menu bar, toolbar, etc. The following code will display a full-size picture in a window without toolbar, address bar, status bar, menu bar, wide, high, 400, 350, respectively: a>
Here, a problem is proposed, and if all full-size pictures have a unified size (such as 400x350), then the above code applies to all thumbnail pictures links (only the full-size picture file points different from the HREF property). However, if the size of the full-size picture is not uniform, we need to take the size of each full-size picture first, then set Height and Width as the correct value in the Window.open method window characteristic parameter, This is obviously too low in the case where the picture is large. So whether there is a way for one, so that the pop-up window can automatically adapt to the size of the picture to display the picture? Through research, it is found that the image object in DHTML can be used to achieve our purpose. Image objects can be dynamically load specified pictures, and they can get the size of the picture by reading their width and height properties, with this to set the pop-up window. Size, you can implement an adaptive picture size pop-up window. Below is the implementation code: