function decreaseSizeImage() on rollover on several images

Question

I can successfully do this with one image in a document:

var glbInc, glbDec;


function decreaseSizeImage() // will get back to its normal default size
{
if(glbInc != null) {clearTimeout(glbInc); glbInc = null;};
if (document.getElementById("idImage").height > 111)
{
document.getElementById("idImage").height -= 1;
document.getElementById("idImage").width -= 1;
glbDec = setTimeout("decreaseSizeImage()", 6);
};
}

function increaseSizeImage()
{
if(glbDec != null) {clearTimeout(glbDec); glbDec = null;};
if (document.getElementById("idImage").height < 222)
{
document.getElementById("idImage").height += 1;
document.getElementById("idImage").width += 1;
glbInc = setTimeout("increaseSizeImage()", 6);
};
}

But when I try it with more than one image, only one of the images will expand, regardless which image is rolled over. I have no idea how to set up so that it will work smoothly for

Answer 1

Here is how I'd lay this out for multiple images. Passing the image element via 'this' avoids having to use any IDs. Not tested!

function decreaseSizeImage(img) { // will get back to its normal default size 
    if (img.height > 111) {
        img.height -= 1;
        img.width -= 1;
        setTimeout(function() {
            decreaseSizeImage(img);
        }, 6);
    }
}

function increaseSizeImage(img) {
    if (img.height < 222) {
        img.height += 1;
        img.width += 1;
        setTimeout(function () {
            increaseSizeImage(img);
        }, 6);
    }
}

...

<img src='myimage.png' onmouseover='decreaseSizeImage(this);' onmouseout='increaseSizeImage(this);'>
<img src='myimage2.png' onmouseover='decreaseSizeImage(this);' onmouseout='increaseSizeImage(this);'>