Inside Technique : Dynamic Image Resizing
One of our first articles demonstrated how to dynamically scale images using Internet Explorer 4.0. In this article, we present a cross-browser technique for resizing images.
In Internet Explorer, you can access, manipulate, and change any element on the page. This includes changing elements that can cause the document to reflow. For example, you can change the size of an image causing the other contents on the page to automatically to be layed out just as if the image started at that size. Netscape is more limiting by allowing you to only manipulate and change a few elements and in no cases can your changes effect the existing flow. Netscape does allow you to change the contents of positioned elements as they layout independently from the rest of your document. Using absolute positioning is where we find our cross-browser solution.
To make image resizing work on both browsers, we must limit ourselves to what is possible in Netscape and only manipulate absolutely positioned elements. To further complicate matters, Netscape does not allow images to be positioned directly. Instead, you must include the image within an absolutely positioned container element (eg., DIV element).
Below we demonstrate how to absolutely position an image for both Netscape Navigator and Internet Explorer:
The above positions the image in the document at 10 pixels over and 10 pixels down. To ensure the resize works correctly, the initial width and height of the container and the image should match.
To handle the image resizing, we wrote a sizeTo() function. This function does its own browser detection and performs custom code based on the browser. In Internet Explorer, we just resize the image directly by changing its width and height. In Netscape, you can't change the size of the image directly. Instead, you need to write a new image into the positioned DIV with a new size. This essentially destroys the existing image and creates a new one with the new size in its place.
The sizeTo() function supports both immediately resizing the image as well as simple animation. The animation is very simple and does not scale the image proportionately in both directions. Instead the image grows a constant size in each direction and one dimension may reach its size before the other (rather than try and explain, you will see this in the demonstration at the end of this page). The non-animated resize is more appealing because the resizing is not very smooth in Netscape since it is essentially reloading the same image over and over (Internet Explorer runs quite smoothly). The sizeTo Function has 5 arguments:
The divName is a case-sensitive string value representing the name of the positioned DIV (eg., zoom in the above
example). The 2nd argument is the path to the image being displayed. The third and fourth argument are the new size. The
last argument is a boolean representing whether or not to animate the to the new size (
The sizeTo function is was written to abstract away as many of the differences as possible.
Below is the sizeTo() function with comments. Immediately following the code there is a simple demonstration of
using this function.
© 1997-2000 InsideDHTML.com, LLC. All rights reserved.