Inside Technique : Dynamic Image Resizing
By Scott Isaacs

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:

<DIV id="zoom" 
     style="height:50; width: 50; top: 10; left: 10; 
            position: absolute">
<IMG src="/gifs/insided.jpg" border=0 height=50 width=50>
</DIV>

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:

sizeTo(divName,imagePath,newWidth,newHeight,Animate)

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 (true animates).

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.

// sizeTo() is a cross-browser function that resizes images

function sizeTo(layerName, img, iHeight, iWidth, animate) {
   var ie4 = (document.all)
   if (ie4) {
     var targetLayer = document.all[layerName]
     // Locate the image to resize
     var el = targetLayer.children.tags("IMG")[0]
     // Add a clip sub-object. This is used to hide browser differences.
     el.clip = new Object      
   }
   else {
     // You can't just resize the image. In Netscape we manipulate
     // the positioned DIV the image is displayed within.
     var el = document.layers[layerName]
     // Add a style object. This is used to hide browser differences
     el.style = new Object
     // Store current height and width in IE compatible properties
     el.style.pixelHeight = el.offsetHeight = el.clip.height 
     el.style.pixelWidth = el.offsetWidth = el.clip.width
   }
   if (!animate) { // No animation, just change image size
      if (ie4) { 
        // Change image size directly in IE
        el.style.pixelWidth = iWidth; el.style.pixelHeight = iHeight
      }
      else {
        // Create new image with new size in Netscape
        el.document.write("<img src='" + img + "' width="+iWidth+" height="+iHeight+">");
        el.document.close();   
      }
   }
   else
   if ((el.offsetHeight != iHeight) || (el.offsetWidth != iWidth)) {
      // Notice we set both the style and clip sub-objects. The clip
      // object is used in Netscape, the style object is used in IE.
      // By setting both directly we do not need to distinguish between
      // browsers.
      if (el.offsetHeight < iHeight) 
        el.style.pixelHeight = el.clip.height = el.offsetHeight + 1;
      if (el.offsetWidth < iWidth) 
        el.style.pixelWidth = el.clip.width = el.offsetWidth + 1;
      if (el.offsetHeight > iHeight) 
        el.style.pixelHeight = el.clip.height = el.offsetHeight - 1;
      if (el.offsetWidth > iWidth) 
        el.style.pixelWidth = el.clip.width = el.offsetWidth  - 1;
      // IE already resized the image when we set the style properties
      // In Netscape we need to write out a new image with the new size
      if (!ie4) {
        el.document.write("<img src='" + img + "' width="+el.style.pixelWidth+" height="+el.style.pixelHeight+">");
        el.document.close();
      }
      // Continue animation
      setTimeout('sizeTo("' + layerName + '","'+img+'",'+iHeight+','+iWidth+','+animate+')',10);
  } 
}

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.