Dynamic image resizing

Published on 2001-08-13 by John Collins.

Follow @TechLeaderPro

JavaScript vs. Gif Animation

It is possible to achieve this effect while using an animated gif instead of doing any coding, but the size of the gif animation would increase download time. Using the new W3C Dom and a JavaScript loop effect, it is possible to increase or decrease the size of an image on the fly, and call this function from any of the JavaScript event handlers (onLoad, onMouseover, onClick etc.). Here is the code:

The Script:

<html>
<head>
<title>Expanding Image Script</title>
 
 
<style type="text/css">
#imageHolder {position:absolute; left:100; top:100; width:750; height:100;
background-color:none;}
</style>
 
<script language="JavaScript">
//dynamic image resizing
img_width = 0; //image starting width and height goes here
img_height = 0;
timer = null;
 
function imageGrow() {
    growImg = document.getElementById('imageResize').style
 
    growImg.width= img_width;
    growImg.height= img_height;
 
    if(img_width != 750) {
        img_width += 75;
        img_height += 10;
        timer = setTimeout('imageGrow()', 30);
    } else {
        clearTimeout('timer');
    }
}
</script>
 
</head>
 
<body onLoad="imageGrow();">
 
<div id="imageHolder" align="center">
<img src="/images/interface/logos/header1.png" border="0" width="0" height="0" id="imageResize" align="center">
</div>
</body>

Notes:

It is important to get the maths right for this function to look right. The image I have used is 750x100 pixels, which gives us a dimension ration of 75:10. Therefore to resize the image I add 75 pixels to the width while only 10 to it's height, maintaining the images aspect ratio (i.e. if I added 75 to both, the final image would be 750x750, not 750x100!). See below:

if(img_width != 750) {
        img_width += 75;
        img_height += 10;
        timer = setTimeout('imageGrow()', 30);

The setTimeout method is used to create the loop, the 30 sets it's speed to a very fast setting, increase this if you want it to slow down. This script works equally well in IE5+ and NS6.1+, the initial release of NS6 had problems resizing the image and it looked awful, but these bugs have been resolved in NS6.1 so I would recommend only that version for this script.

Updated 2020 : note that the above post is out-of-date, given this post was originally published in 2001, but is left here for archival purposes.