var resizeDelay = 30;
var resizeIncrement = 2;
var imgCache = new Object();

function getCacheTag(imgElement) {
    return imgElement.src + "~" + imgElement.offsetLeft + "~" + imgElement.offsetTop;
}

function cachedImg(imgElement, increment) {
    this.img = imgElement;
    this.cacheTag = getCacheTag(imgElement);
    this.originalSrc = imgElement.src;

    var h = imgElement.height;
    var w = imgElement.width;
    this.originalHeight = h;
    this.originalWidth = w;

    increment = (!increment) ? resizeIncrement : increment;
    this.heightIncrement = Math.ceil(Math.min(1, (h / w)) * increment);
    this.widthIncrement = Math.ceil(Math.min(1, (w / h)) * increment);
}

function resizeImg(imgElement, percentChange, newImageURL) {
    var pct = (percentChange) ? percentChange / 100 : 1;
    var cacheTag = imgElement.getAttribute("cacheTag");
    if (!cacheTag) {
        cacheTag = getCacheTag(imgElement);
        imgElement.setAttribute("cacheTag", cacheTag);
    }
    var cacheVal = imgCache[cacheTag];
    if (!cacheVal) {
        imgCache[cacheTag] = new Array(new cachedImg(imgElement), pct);
    } else {
        cacheVal[1] = pct;
    }
    if (newImageURL)
        imgElement.src = newImageURL;
    resizeImgLoop(cacheTag);
    return true;
}

function resizeImgLoop(cacheTag) {
    var cacheVal = imgCache[cacheTag];
    if (!cacheVal)
        return false;

    var cachedImageObj = cacheVal[0];
    var imgElement = cachedImageObj.img;
    var pct = cacheVal[1];
    var plusMinus = (pct > 1) ? 1 : -1;
    var hinc = plusMinus * cachedImageObj.heightIncrement;
    var vinc = plusMinus * cachedImageObj.widthIncrement;
    var startHeight = cachedImageObj.originalHeight;
    var startWidth = cachedImageObj.originalWidth;

    var currentHeight = imgElement.height;
    var currentWidth = imgElement.width;
    var endHeight = Math.round(startHeight * pct);
    var endWidth = Math.round(startWidth * pct);
    if ((currentHeight == endHeight) || (currentWidth == endWidth))
        return true;

    var newHeight = currentHeight + hinc;
    var newWidth = currentWidth + vinc;
    if (pct > 1) {
        if ((newHeight >= endHeight) || (newWidth >= endWidth)) {
            newHeight = endHeight;
            newWidth = endWidth;
        }
    } else {
        if ((newHeight <= endHeight) || (newWidth <= endWidth)) {
            newHeight = endHeight;
            newWidth = endWidth;
        }
    }

    imgElement.height = newHeight;
    imgElement.width = newWidth;

    if ((newHeight == cachedImageObj.originalHeight) || (newWidth == cachedImageObj.originalwidth)) {
        imgElement.src = cachedImageObj.originalSrc;
    }

    setTimeout("resizeImgLoop('" + cacheTag + "')", resizeDelay);
}
// add this to the img tag in html body:
//<img class="" alt="" src="" onmouseover="resizeImg(this, 130)"
//onmouseout="resizeImg(this)"/>
// Note: the 130 is % increase in the onmouseover parameter
// also a 3rd parameter in onmouseover can can specify another image that should be used as the
// image is being resized (it's common for "rollover images" to be similar but
// slightly different or more colorful than the base images). If this parameter
// is omitted, we'll just resize the existing image. Example (this, 130, image.gif)