Dynamic Image Resizing

Using JavaScript to resize images on the fly.

Looking for a new simple way to plan your day? Get organized with Five.Today


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:

<title>Expanding Image Script</title>
<style type="text/css">
#imageHolder {position:absolute; left:100; top:100; width:750; height:100;
<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 {
<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">


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.

Looking for a modern PHP framework to build your new project? Please consider using the Alpha Framework

John Collins

I have been writing about web technology and software development since 2001. I am the developer of the Alpha Framework for PHP, and the Five.Today personal productivity app. I love open source, technology, and economics.