AJAX

Auto Image Resize and create thumbs

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2005

Posts: 240

Reputation: Inny is an unknown quantity at this point

Solved Threads: 6

Inny

Offline

Posting Whiz in Training

Auto Image Resize and create thumbs

Sep 25th, 2007

Im looking for a code like the one below that automatically resizes posted images to desired size while at the same time the resized images are clickable for full size which opens in another window.
The one below does not work on my forum software, Im looking for a work around/reworking of the code below.
Any help appreciated! Thankyou.

[code]
<script>
function ResizeThem() {
maxheight=300;
maxwidth= 300;
imgs=document.getElementsByTagName("img");
for (p=0; p<imgs.length; p++) {
if (imgs[p].getAttribute("alt")=="user posted image") {
w=parseInt(imgs[p].width);
h=parseInt(imgs[p].height);
if (parseInt(imgs[p].width)>maxwidth) {
imgs[p].style.cursor="pointer";
imgs[p].onclick=new Function("iw=window.open(this.src,'ImageViewer','resizable=1');iw.focus()");
imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
imgs[p].width=maxwidth;
}
if (parseInt(imgs[p].height)>maxheight) {
imgs[p].style.cursor="pointer";
imgs[p].onclick=new
Function("iw=window.open(this.src,'ImageViewer','resizable=1');iw.focus()");
imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
imgs[p].height=maxheight;
}
}
}
}
</script>

<body onLoad="ResizeThem()">
[code]

Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Auto Image Resize and create thumbs

Sep 25th, 2007

You know it'll only work for images that have an alt attribute of 'user posted image' right?

Also, you're not saving a lot by using this code; better, serverside, means of doing this actually decrease the size of the thumbnail image, because that saves on download bandwidth.. this code will download fullsize pictures then put them into little img boxes to make them visually smaller.. but, not smaller in terms of the download itself.

This works for me, I tidied it up abit but it does almost the same things, I changed a bit of the code so that it uses those w and h variables; they weren't being used before. This way, you don't have any need to call parseInt more than twice:

 Help with Code Tags 
 Javascript Syntax (Toggle Plain Text) 
<html>
<head>
<script type="text/javascript">
function ResizeThem()
{
  var maxheight = 300;
  var maxwidth = 300;
  var imgs = document.getElementsByTagName("img");
  for ( var p = 0; p < imgs.length; p++ )
  {
    if ( imgs[p].getAttribute("alt") == "user posted image" )
    {
      var w = parseInt( imgs[p].width );
      var h = parseInt( imgs[p].height );
      if ( w > maxwidth )
      {
        imgs[p].style.cursor = "pointer";
        imgs[p].onclick = function( )
        {
          var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
          iw.focus();
        };
        h = ( maxwidth / w ) * h;
        w = maxwidth;
        imgs[p].height = h;
        imgs[p].width = w;
      }
      if ( h > maxheight )
      {
        imgs[p].style.cursor="pointer";
        imgs[p].onclick = function( )
        { 
          var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
          iw.focus( );
        };
        imgs[p].width = ( maxheight / h ) * w;
        imgs[p].height = maxheight;
      }
    }
  }
}
</script>
</head>
<body onLoad="ResizeThem()">
 
    <img src="http://pinker.wjh.harvard.edu/photos/cape_cod/images/blue%20sky%20sailboat.jpg" alt="user posted image"/>
    <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image"/>
    <img src="http://www.puzzlethis.co.uk/images/hom/cube.jpg" alt="user posted image"/>
 
</body>
</html>
<html>
<head>
<script type="text/javascript">
function ResizeThem()
{
  var maxheight = 300;
  var maxwidth = 300;
  var imgs = document.getElementsByTagName("img");
  for ( var p = 0; p < imgs.length; p++ )
  {
    if ( imgs[p].getAttribute("alt") == "user posted image" )
    {
      var w = parseInt( imgs[p].width );
      var h = parseInt( imgs[p].height );
      if ( w > maxwidth )
      {
        imgs[p].style.cursor = "pointer";
        imgs[p].onclick = function( )
        {
          var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
          iw.focus();
        };
        h = ( maxwidth / w ) * h;
        w = maxwidth;
        imgs[p].height = h;
        imgs[p].width = w;
      }
      if ( h > maxheight )
      {
        imgs[p].style.cursor="pointer";
        imgs[p].onclick = function( )
        { 
          var iw = window.open ( this.src, 'ImageViewer','resizable=1' );
          iw.focus( );
        };
        imgs[p].width = ( maxheight / h ) * w;
        imgs[p].height = maxheight;
      }
    }
  }
}
</script>
</head>
<body onLoad="ResizeThem()">

    <img src="http://pinker.wjh.harvard.edu/photos/cape_cod/images/blue%20sky%20sailboat.jpg" alt="user posted image"/>
    <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image"/>
    <img src="http://www.puzzlethis.co.uk/images/hom/cube.jpg" alt="user posted image"/>
    
</body>
</html>

most of the changes i made to the JS are just `better practice' things ( indentation, declaring variables, etc ) rather than essential changes. The original code should work fine as long as the images to resize all have that necessary alt attribute..

Plato forgot the nullahedron..

•

Join Date: Oct 2005

Posts: 240

Reputation: Inny is an unknown quantity at this point

Solved Threads: 6

Inny

Offline

Posting Whiz in Training

Re: Auto Image Resize and create thumbs

Sep 25th, 2007

can we do away with the requirement for an alt attribute altogether? so any image posted in img tags will work?
Its still not resizing, see here

http://testmods.5.forumer.com/index....st=0&#entry578

it seems the alt tag is added afterwards?

can we make it focus on images posted in [img] tags?

Last edited by Inny; Sep 25th, 2007 at 12:49 pm.

Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields

•

Join Date: Jun 2006

Posts: 7,651

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 474

~s.o.s~

Offline

Failure as a human

Re: Auto Image Resize and create thumbs

Sep 25th, 2007

Not to mention on a slow internet connection the entire images are downloaded, displayed in their full dimensions and then resized only when the document is _entirely_ loaded (onload will be called only when all the images are downloaded).

Like Matt already mentioned, consider shrinking the images on the server side to save on the client bandwidth and the weird behavior. Better yet, cache the images which have been shrinked or store the shrinked images in a separate location / database table to achieve time efficiency traded against space.

> can we do away with the requirement for an alt attribute altogether? so any image posted in img
> tags will work?
It all depends on the way you are associating your images with the post under consideration. As soon as the user attaches images and posts, the data is sent to the server. The kind of processing you do at the server and the way a post is rendered decides it all.

Last edited by ~s.o.s~; Sep 25th, 2007 at 12:48 pm.

I don't accept change; I don't deserve to live.

Jo Tujhe Jagaaye, Nindein Teri Udaaye Khwaab Hai Sachcha Wahi.
Nindon Mein Jo Aaye Jise To Bhul Jaaye Khawab Woh Sachcha Nahi.
Khwaab Ko Raag De, Nind Ko Aag De

•

Join Date: Oct 2005

Posts: 240

Reputation: Inny is an unknown quantity at this point

Solved Threads: 6

Inny

Offline

Posting Whiz in Training

Re: Auto Image Resize and create thumbs

Sep 25th, 2007

It must be done client side unfortunately as I have no access to the server as such, however bandwidth is unlimited and I want to use this primarily for preventing stretching of a post by large images, rather than image file size.

Example of the page in question, not sure if this helps?

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!--Begin Msg Number 573-->
    <table width='100%' border='0' cellspacing='1' cellpadding='3'>
    <tr>
      <td valign='middle' class='row4' width="1%"><a name='entry573'></a><span class='normalname'><a href='http://testmods.5.forumer.com/index.php?showuser=1'>Mrstest</a></span></td>
        <td class='row4' valign='top' width="99%">
 
 
 
        <!-- POSTED DATE DIV -->
 
        <div align='left' class='row4' style='float:left;paddingtop:4px;padding-bottom:4px'>
        <span class='postdetails'><b><a title="Show the link to this post" href="#" onclick="link_to_post(); return false;" style="text-decoration:underline">Posted:</a></b>
Yesterday at 07:06 am</a> ) Thanks For visiting Testmods! </span>
        </div>
 
 
        <!-- REPORT / DELETE / EDIT / QUOTE DIV -->
 
        <div align='right'>
        <!--TEMPLATE: skin_topic, Template Part: report_link-->
<a href='http://testmods.5.forumer.com/index.php?act=report&amp;f=1&amp;t=158&amp;p=573&amp;st=0'><img src='style_images/1/p_report.gif' border='0'  alt='Report Post' /></a><a href="http://testmods.5.forumer.com/index.php?act=Post&amp;CODE=08&amp;f=1&amp;t=158&amp;p=573&amp;st=0"><img src='style_images/1/p_edit.gif' border='0'  alt='Edit Post' /></a>  <a href='{ibf.script_urlact=Post&amp;CODE=06&amp;f=1&amp;t=158&amp;p=573'><img src='style_images/1/p_quote.gif' border='0'  alt='Quote Post' /></a>
      </div>
 
 
    </tr>
    <tr>
      <td valign='top' class='post2'>
<a href="javascript:expandcollapse('573')">
   [+/-] show/hide user profile</a>
 
<span class="posthidden" id="573">
 
 
 
 
 <span class='postdetails'>
        <img src='http://testmods.5.forumer.com/html/avatars/abra1.gif' border='0' alt='' /><br /><br />
        Mrs Doubtfire<br /><br />
        <img src='style_images/1/pip.gif' border='0'  alt='*' /><img src='style_images/1/pip.gif' border='0'  alt='*' /><img src='style_images/1/pip.gif' border='0'  alt='*' /><br /><br />
        Group: Admin<br />
        Posts: 229<br />
        Member No.: 1<br />
        Joined: April 08, 2006<br />
         <img src='http://www.filelodge.com/files/room20/525867/Flags/as.gif'>
<br />
         </span><br />
 
 
</span>
 
 
 
        <!--$ author[field_1]-->
 
 
 
        <img src='style_images/1/spacer.gif' alt='' width='160' height='1' /><br /> 
 
      </td>
      <td width='100%' valign='top' class='post2'>
        <!-- THE POST 573 -->
 
<div class="header" style="width:500px; height:2px; overflow:auto;"></div> 
<div class="container" style="width:500px; overflow:auto; height:200px;/*this becomes the editable height*/"> 
<table border="0">
 
<tr>
<td>
 
 <div class='postcolor'>  <img src='http://www.mass.gov/envir/forest/images/multiLayerForest.jpg' border='0' alt='user posted image' />  <br /><br /><span class='edit'>This post has been edited by <b>Mrstest</b> on Today at 05:18 am</span> </div>
        <filter:dropshadow><!--TEMPLATE: skin_global, Template Part: signature_separator-->
<br /><br />--------------------<br />
<div class='signature'>A Sig<br /><img src='http://www.google.com.au/intl/en_au/images/logo.gif' border='0' alt='user posted image' /></div></filter>
 
</td>
</tr>
</table></div> 
<div class="footer" style="width:500px; height:2px; overflow:auto;"></div> 
 
 
        <!-- THE POST -->
</td>
    </tr>
    <tr>
      <td class='darkrow3' align='left'><b><!--TEMPLATE: skin_topic, Template Part: ip_show-->
<span class='desc'>IP: [ ---------- ]</span></b></td>
      <td class='darkrow3' nowrap="nowrap" align='left'>
 
        <!-- PM / EMAIL / WWW / MSGR -->
 
        <div align='left' class='darkrow3' style='float:left;width:auto'>
        <a href='http://testmods.5.forumer.com/index.php?act=Msg&amp;CODE=04&amp;MID=1'><img src='style_images/1/p_pm.gif' border='0'  alt='PM' /></a>
           <a href='http://testmods.5.forumer.com/index.php?act=Mail&amp;CODE=00&amp;MID=1'><img src='style_images/1/p_email.gif' border='0'  alt='Email Poster' /></a>
           <a href='http://herproom.5.forumer.com' target='_blank'><img src='style_images/1/p_www.gif' border='0'  alt='Users Website' /></a>
 
 
 
 
        </div>
 
        <!-- REPORT / UP -->
 
        <div align='right'>
         <a href='javascript:scroll(0,0);'><img src='style_images/1/p_up.gif' alt='Top' border='0' /></a>
        </div>
<!--Begin Msg Number 573-->
    <table width='100%' border='0' cellspacing='1' cellpadding='3'>
    <tr>
      <td valign='middle' class='row4' width="1%"><a name='entry573'></a><span class='normalname'><a href='http://testmods.5.forumer.com/index.php?showuser=1'>Mrstest</a></span></td>
        <td class='row4' valign='top' width="99%">


        
        <!-- POSTED DATE DIV -->
        
        <div align='left' class='row4' style='float:left;paddingtop:4px;padding-bottom:4px'>
        <span class='postdetails'><b><a title="Show the link to this post" href="#" onclick="link_to_post(); return false;" style="text-decoration:underline">Posted:</a></b>
Yesterday at 07:06 am</a> ) Thanks For visiting Testmods! </span>
        </div>

        
        <!-- REPORT / DELETE / EDIT / QUOTE DIV -->
        
        <div align='right'>
        <!--TEMPLATE: skin_topic, Template Part: report_link-->
<a href='http://testmods.5.forumer.com/index.php?act=report&amp;f=1&amp;t=158&amp;p=573&amp;st=0'><img src='style_images/1/p_report.gif' border='0'  alt='Report Post' /></a><a href="http://testmods.5.forumer.com/index.php?act=Post&amp;CODE=08&amp;f=1&amp;t=158&amp;p=573&amp;st=0"><img src='style_images/1/p_edit.gif' border='0'  alt='Edit Post' /></a>  <a href='{ibf.script_urlact=Post&amp;CODE=06&amp;f=1&amp;t=158&amp;p=573'><img src='style_images/1/p_quote.gif' border='0'  alt='Quote Post' /></a>
      </div>
      

    </tr>
    <tr>
      <td valign='top' class='post2'>
<a href="javascript<b></b>:expandcollapse('573')">
   [+/-] show/hide user profile</a>

<span class="posthidden" id="573">




 <span class='postdetails'>
        <img src='http://testmods.5.forumer.com/html/avatars/abra1.gif' border='0' alt='' /><br /><br />
        Mrs Doubtfire<br /><br />
        <img src='style_images/1/pip.gif' border='0'  alt='*' /><img src='style_images/1/pip.gif' border='0'  alt='*' /><img src='style_images/1/pip.gif' border='0'  alt='*' /><br /><br />
        Group: Admin<br />
        Posts: 229<br />
        Member No.: 1<br />
        Joined: April 08, 2006<br />
         <img src='http://www.filelodge.com/files/room20/525867/Flags/as.gif'>
<br />
         </span><br />


</span>
   


        <!--$ author[field_1]-->



        <img src='style_images/1/spacer.gif' alt='' width='160' height='1' /><br /> 

      </td>
      <td width='100%' valign='top' class='post2'>
        <!-- THE POST 573 -->

<div class="header" style="width:500px; height:2px; overflow:auto;"></div> 
<div class="container" style="width:500px; overflow:auto; height:200px;/*this becomes the editable height*/"> 
<table border="0">
 
<tr>
<td>

 <div class='postcolor'>  <img src='http://www.mass.gov/envir/forest/images/multiLayerForest.jpg' border='0' alt='user posted image' />  <br /><br /><span class='edit'>This post has been edited by <b>Mrstest</b> on Today at 05:18 am</span> </div>
        <filter:dropshadow><!--TEMPLATE: skin_global, Template Part: signature_separator-->
<br /><br />--------------------<br />
<div class='signature'>A Sig<br /><img src='http://www.google.com.au/intl/en_au/images/logo.gif' border='0' alt='user posted image' /></div></filter>

</td>
</tr>
</table></div> 
<div class="footer" style="width:500px; height:2px; overflow:auto;"></div> 


        <!-- THE POST -->
</td>
    </tr>
    <tr>
      <td class='darkrow3' align='left'><b><!--TEMPLATE: skin_topic, Template Part: ip_show-->
<span class='desc'>IP: [ ---------- ]</span></b></td>
      <td class='darkrow3' nowrap="nowrap" align='left'>
      
        <!-- PM / EMAIL / WWW / MSGR -->
      
        <div align='left' class='darkrow3' style='float:left;width:auto'>
        <a href='http://testmods.5.forumer.com/index.php?act=Msg&amp;CODE=04&amp;MID=1'><img src='style_images/1/p_pm.gif' border='0'  alt='PM' /></a>
           <a href='http://testmods.5.forumer.com/index.php?act=Mail&amp;CODE=00&amp;MID=1'><img src='style_images/1/p_email.gif' border='0'  alt='Email Poster' /></a>
           <a href='http://herproom.5.forumer.com' target='_blank'><img src='style_images/1/p_www.gif' border='0'  alt='Users Website' /></a>
           
        
           
           
        </div>
        
        <!-- REPORT / UP -->
         
        <div align='right'>
         <a href='javascript<b></b>:scroll(0,0);'><img src='style_images/1/p_up.gif' alt='Top' border='0' /></a>
        </div>

Last edited by Inny; Sep 25th, 2007 at 1:00 pm.

Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Auto Image Resize and create thumbs

Sep 25th, 2007

•

Originally Posted by Inny

can we do away with the requirement for an alt attribute altogether? so any image posted in img tags will work?
Its still not resizing, see here

http://testmods.5.forumer.com/index....st=0&#entry578

it seems the alt tag is added afterwards?

can we make it focus on images posted in [img] tags?

In your source, you have 2 <body> open tags. I'm not gonna look much further than that, sorry.

Look at the JS code for the image resizing, it's pretty easy to see the part that checks the 'alt' of the images. You could change that to check for a classname instead.. that's something that the user never sees, and your forum software may already be using a certain class for the <img> tags that it generates from BBcode

To be honest, you can ditch the JS dependancy entirely, and the dodgy delayed scaling entirely; if you rely on a bit of new-ish CSS, and the target="_blank" attribute.. ( Before any hippy tirades, I know 'target' is deprecated in XHTML 1.0 strict, but, Inny's site isn't XHTML 1.0 strict ). I'm not sure though, whether max-height/max-width is supported on older browsers, I've not had much luck with it in the past, but it works for me right now... If you don't mind assuming that the image is always going to be roughly square, you can just set img.thumbnail{ width: 300px; }, but, that's a big assumption. ( EDIT: whatever you do though, don't set width AND height to 300, it'll stretch the image without retaining aspect ratio.. If you leave one of them off, the renderer should pick the other one intelligently, but if you force it square, it'll go square whatever the dimensions of the image )

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
img.thumbnail
{
  max-width:300px;
  max-height:300px;
}
a.thumbnail
{
  border-style:none;
}
</style>
</head>
<body>
    <a href="http://pinker.wjh.harvard.edu/photos/cape_cod/images/blue%20sky%20sailboat.jpg" target="_blank" class="thumbnail">
      <img src="http://pinker.wjh.harvard.edu/photos/cape_cod/images/blue%20sky%20sailboat.jpg" alt="user posted image" class="thumbnail"/>
    </a>
    <a href="http://www.link.cs.cmu.edu/splay/tree5.jpg" target="_blank" class="thumbnail">
      <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image" class="thumbnail"/>
    </a>
    <a href="http://www.puzzlethis.co.uk/images/hom/cube.jpg" target="_blank" class="thumbnail">
      <img src="http://www.puzzlethis.co.uk/images/hom/cube.jpg" alt="user posted image" class="thumbnail"/>
    </a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
img.thumbnail
{
  max-width:300px;
  max-height:300px;
}
a.thumbnail
{
  border-style:none;
}
</style>
</head>
<body>
    <a href="http://pinker.wjh.harvard.edu/photos/cape_cod/images/blue%20sky%20sailboat.jpg" target="_blank" class="thumbnail">
      <img src="http://pinker.wjh.harvard.edu/photos/cape_cod/images/blue%20sky%20sailboat.jpg" alt="user posted image" class="thumbnail"/>
    </a>
    <a href="http://www.link.cs.cmu.edu/splay/tree5.jpg" target="_blank" class="thumbnail">
      <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image" class="thumbnail"/>
    </a>
    <a href="http://www.puzzlethis.co.uk/images/hom/cube.jpg" target="_blank" class="thumbnail">
      <img src="http://www.puzzlethis.co.uk/images/hom/cube.jpg" alt="user posted image" class="thumbnail"/>
    </a>
</body>
</html>

Last edited by MattEvans; Sep 25th, 2007 at 1:17 pm.

Plato forgot the nullahedron..

•

Join Date: Oct 2005

Posts: 240

Reputation: Inny is an unknown quantity at this point

Solved Threads: 6

Inny

Offline

Posting Whiz in Training

Re: Auto Image Resize and create thumbs

Sep 25th, 2007

It seems the body open tag is hardwritten in where i cannot access it, this must be the problem. the style above will not be useful since we are talking images posted using image tags bb code, nobody will use html.
would altering body onload to a built in window.onload instead work?

This is all i can find relating to image class ?

<input type='button' accesskey='g' value=' IMG ' onclick='tag_image()' class='codebuttons' name='img' onmouseover="hstat('img')" />

Last edited by Inny; Sep 25th, 2007 at 1:29 pm.

Always carry a flagon of whiskey in case of snakebite and furthermore always carry a small snake.
W. C. Fields

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Auto Image Resize and create thumbs

Sep 25th, 2007

If by builtin you mean registered as an event handler using javascript to do the 'registering'.. yes, it will work. Consider fixing the code though, somewhere you're dropping another <body> tag in there, and that's a big error. I don't imagine that the second <body> tag gets processed atall, and that's the one with the event.

Even if you can't lose the JS dependance, you should still be able to address and affect (in CSS) the images generated from the BBcode, CSS doesn't care how the images are generated.. A CSS selector that should address every image within a post on your site:

 Help with Code Tags 
 CSS Syntax (Toggle Plain Text) 
div.postcolor img
{
/* CSS here */
}
div.postcolor img
{
/* CSS here */
}

Looking at your site again though, the images don't seem to have a specific class.. You CAN collect them indirectly based on the assumption that they're always in DIVs with class 'postcolor'... But try and get it working on the specific ALT first, since your posted images all seem to have that ALT anyway..

Plato forgot the nullahedron..

•

Join Date: Jul 2006

Posts: 1,091

Reputation: MattEvans is a jewel in the rough

Solved Threads: 63

MattEvans

Offline

Veteran Poster

Re: Auto Image Resize and create thumbs

Sep 25th, 2007

•

Originally Posted by Inny

would altering body onload to a built in window.onload instead work?

By the way, it should be document.body.onload... And in tests, it only works if you register that event handler after the starting body tag has been processed.. like:

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
.... Rest of site ^^^^
    <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image"/>
    <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image"/>
 
    <script type="text/javascript">
    document.body.onload = "ResizeThem( );";
    </script>
</body>
</html>
.... Rest of site ^^^^
    <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image"/>
    <img src="http://www.link.cs.cmu.edu/splay/tree5.jpg" alt="user posted image"/>
    
    <script type="text/javascript">
    document.body.onload = "ResizeThem( );";
    </script>
</body>
</html>

That's erring on the side of 'really bad practice'.. You can't just call the function from script in the head section though; none of the objects will exist..

Last edited by MattEvans; Sep 25th, 2007 at 1:52 pm.

Plato forgot the nullahedron..