How to Resize Image 1

byrne1 · Sep 2, 2003

I have a nav bar setup w/ mouseover events that swap pictures in my image box. The problem is that some of the images differ in sizes and they get "stretched" (or compressed) when they appear.

How can I dynamically resize the image box when the images get swapped out?

dwarfthrower · Sep 2, 2003

Leave out the height and width attributes for your img tag and whatever image you swap into it will conform to it's own proportions rather than the ones specified in the img tag.

Alternately you can use javascript to resize an image like so:

var imgObj = document.getElementById('myImageTagId');
imgObj.height = 100;
imgObj.width = 50;

EdwardMartinIII · Sep 5, 2003

You'll need to grab the "soapbox" image from this site ( [soapbox]

) to make the example work, but try this on for size:

Code:

<!DOCTYPE html 
     PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;
     &quot;[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>[/URL]

<html xmlns=&quot;[URL unfurl="true"]http://www.w3.org/1999/xhtml&quot;[/URL] xml:lang=&quot;en&quot; lang=&quot;en&quot;>
  <head>
    <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;></meta>
    <title>JavaScript Sample</title>
  </head>
  <body>
    <form name=&quot;MainForm&quot;>
      <table border=&quot;1&quot;>
        <tr>
          <td><input type=&quot;button&quot; value=&quot;taller&quot; onclick=&quot;document.Grafix01.height += 3;&quot;></input></td>
          <td colspan=&quot;2&quot; rowspan=&quot;2&quot;><img src=&quot;soapbox.gif&quot; height=&quot;58&quot; width=&quot;43&quot; alt=&quot;Soap Box&quot; name=&quot;Grafix01&quot; id=&quot;Grafix01&quot;></img></td>
        </tr>
        <tr>
          <td><input type=&quot;button&quot; value=&quot;shorter&quot; onclick=&quot;document.Grafix01.height -= 3;&quot;></input></td>
        </tr>
        <tr>
          <td><input type=&quot;button&quot; value=&quot;Normalize&quot; onclick=&quot;document.Grafix01.height = 58;document.Grafix01.width = 43;&quot;></input></td>
          <td><input type=&quot;button&quot; value=&quot;Skinnier&quot; onclick=&quot;document.Grafix01.width -= 3;&quot;></input></td>
          <td><input type=&quot;button&quot; value=&quot;Wider&quot; onclick=&quot;document.Grafix01.width += 3;&quot;></input></td>
        </tr>
        <tr>
          <td colspan=&quot;3&quot;><p>Height (pixels): <input type=&quot;text&quot; size=&quot;3&quot; name=&quot;Higgins&quot; id=&quot;Higgins&quot; onblur=&quot;document.Grafix01.height=document.MainForm.Higgins.value;&quot;></input><br />Width (pixels): <input type=&quot;text&quot; size=&quot;3&quot; name=&quot;Widdershins&quot; id=&quot;Widdershins&quot; onblur=&quot;document.Grafix01.width=document.MainForm.Widdershins.value;&quot;></input></p></td>
        </tr>
      </table>
      <p>Resize the image dynamically using the buttons</p>
    </form>
  </body>
</html>

Cheers,

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

vbkris · Sep 6, 2003

dwarfthrower does:
document.getElementById - is DOM right?

does it work in NS?

Known is handfull, Unknown is worldfull

dwarfthrower · Sep 6, 2003

vbkris... I can't say for sure what versions of NS 'document.getElementById' will work for. I don't use it, haven't since Netscape 3. But document.getElementById is the correct manner of getting hold of an element. As far as I'm concerned, the browsers aren't supposed to set the standards, they're supposed to adhere to them.

sundemon · Sep 6, 2003

hi,
since images were one of the first things you could dynamically manipulate in browsers, you can can refer to and change images through "document.images[imageName]", where imageName is any named image on your page, and so avoid DOM compatbility issues, although earlier DOM references are fading fast.

sundemon

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to Resize Image 1

byrne1

Programmer

dwarfthrower

Programmer

EdwardMartinIII

Technical User

vbkris

Programmer

dwarfthrower

Programmer

sundemon

Programmer

Similar threads

Part and Inventory Search

Sponsor