SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Vancouver, WA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Convert 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
    Last edited by DDesign; Aug 9, 2003 at 23:49.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You want to "click and drag" an image corner, and have the image resize as it is dragged?

  3. #3
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Vancouver, WA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No I think he just wants the image resized onmouseover.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  5. #5
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you want it to be proportional?
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  6. #6
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Vancouver, WA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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);" />
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  8. #8
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Vancouver, WA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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');" />
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  10. #10
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Vancouver, WA
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •