views:

2647

answers:

4

Hello, I am trying to get some javascript to programatically adjust a html img tag's width to display various sized images correctly.

I have a fixed width img tag at 800px to display an image, this is the max width.

If the image is wider then 800px I want to display it at 800px wide;

If the image is less than 800px wide I want to preserve its width to avoid stretching it.

I use this html/javacript code to get a partial solution:

<html>
  <head>
    <script type="text/javascript">
    <!--
      function resize_image( id )
      { 
        var img = document.getElementById( id );

        var normal_width = img.width;

        img.removeAttribute( "width" ); 

        var real_width = img.width;

        if( real_width < normal_width )
            img.width = real_width;
        else
            img.width = normal_width;
      }
    //-->
    </script>
  </head>
  <body>
    <img id="myimage" onload="resize_image(self.id);" src="IMAGE.JPG" width="800" />
  </body>
</html>

The above code seems to work on all browsers I have tested except Safari (images don't display unless you refresh the page).

I know I can use CSS max-width but that wont work on IE < 7 which is a show stopper.

How can I get this working for all browsers? Many thanks in advance.

+2  A: 

Use the IE6 css+javascript hack:

  .dynamic_img {
      width: expression(document.body.clientWidth <= 800? "auto" : "800px");
      max-width: 800px; //For normal browsers
  }
Max
This has a performance cost, so you can't have a bunch of them on the page.
sblundy
Hm, I've just tested it and guess what, that expression is evaluated on any possible event. And I was naive to think it evaluates only once...
Max
A: 

Have you tried monkey with img.style.width? You could also try having 2 CSS classes for each of the 2 conditions and programmaticly change them.

sblundy
+3  A: 

I have never seen a safari in work, but you can try changing your onload event to this:

onload="resize_image(self.id);return true"

It could be that without a return value, safari thinks that this object should not be loaded.

Max
+1  A: 

Without id:

...
  function resize_image( img )
  {
     //var img = document.getElementById( id );
...
  <img onload="resize_image(this);" src="IMAGE.JPG" width="800" />
mroztn