April 19th, 2008 | Web Development

Auto Restrain/resize images with Javascript

106

This javascript script resizes all image on the page, it can be controlled by the variable i and the greater than clause in the for loop. i=0 means it starts from the first image, change i=3 it will start from the forth image. The greater than clause will resize x amount of images. right now it resizes 10 images. The first 100 seen decides if the image is under 100 pixels wide not to resize it to 100, the second is what to resize the image too.  comment any questions

<script language="javascript" type="text/javascript">

<!--

  function resize_images()

  {

    for (i = 0; i < 10; i++)

    {

      while ( !document.images[i].complete )

      {

        break;

      }

      if ( document.images[i].width > 100 )

      {

        document.images[i].width = 100;

      }

    }

  }

//-->

 

</script>

To implement the function on the page use this as your body tag

<body onLoad="resize_images()">

2 comments ↓

If you found this post useful click the share this button. Contribute below by adding a comment, no registration is required.


  • Michael says on 11.12.08 at 11:20 am comment #1

    Nice simple script. Only iussue I have is an IE 7 script error which states:

    Message: ‘document.images[...].complete’ is null or not an object

    Any suggestions?

  • ardeay says on 11.17.08 at 10:34 am comment #2

    Do you have a link to where you are using it?

Leave a Comment