Covert this small PHP script into JavaScript

Hello,

I'm having troubles converting this PHP script into JavaScript

function ResizeImage($image ,$width ,$height)
{
//image resizer by myscripting
//get the size of the original
$size = GetImageSize($image);
//divide the width / height percentage by 100
$new_width = 100 / $width;
$new_height = 100 / $height;
//store the resized dimensions in a variable
$sizeh = $size[1]/ $new_height;
$sizew= $size[0]/ $new_width;
//display the new resized image
$new_image = "<img src = \"$image\" height=\"$sizeh\" width =\"$sizew\">";
echo $new_image;
}

What im trying to do is beable to resize an image in a DHTML layer onMouseover using the above function ResizeImage("1.gif",50,50);

Please help.

Thanks,
-Flint

You want to "click and drag" an image corner, and have the image resize as it is dragged?

No I think he just wants the image resized onmouseover.

Thank you for replying MikeFoster. No I dont want to click and drag the image to resize it. I want to onMouseover the image and have it automaticly resize to whatever width and height numbers I place in the
function. I think the PHP script does that but I want it done using JavaScript.

-Flint

Do you want it to be proportional?

Hello Jeff Lange. No it doesnt need to be proportional im dealing with a one color image. So it shouldnt matter what width and height it gets, the resolution will always be good. Is this right? Does this answer your question? Thanks for asking.

-Flint

Code:

---

function resizeImage(imageElement, width, height)
{
        if (imageElement.tagName == 'IMG')
        {
                imageElement.style.width = width;
                imageElement.style.width = height;
        }
}

---

HTML Code:

---

<img src="image.jpg" onmouseover="resizeImage(this, 50, 50);" />

---

Thanks Jeff Lange your code works great, but I need to have the path of the image in the function parameters so I can use this function with many different images through out my site. So I can mouseover any image that has the onMouseover command and have the image in the function parameters change. Only one image in an DHTML layer will change width and height but I want to change that image by mouseover another image in my navigational bar. I should of been a lot more clear about my problem, I'm sorry. Should I edit my first post so that my problem is more clear to the members at SitePoint?
Example: onmouseover="resizeImage('images/1.gif', 60, 2);" I think the code that you have given me can do this with a small modification, but I'm not sure. Thanks again for the code.

-Flint

Code:

---

function resizeImage(imageElement, width, height, newSrc)
{
        if (imageElement.tagName == 'IMG')
        {
                if (newSrc)
                        imageElement.src = newSrc;
                imageElement.style.width = width;
                imageElement.style.width = height;
        }
}

---

HTML Code:

---

<img src="something.jpg" onmouseover="resizeImage(this, 50, 50, 'newimage.jpg');" />

---

Thanks for the quick response Jeff Lange, but your code resizes the wrong image. It resizes the image that has the onMouseover command and not the image src in the function parameter. I think this is because of the this, in the function parameters onMouseOver command. I want just the image src in the function parameters to change. Does this make sense?

-Flint