AutoResize images inside of table?

Hi everyone -

I have the following code that will automatically resize all images on a page to a desired size:


****************************
      <head>
            <script language="javascript">
            <!--
                  function sizeIt() {
                        for (i=1;i<document.images.length;i++) {
                              if (document.images[i].width > 100) {
                                    document.images[i].width = 100;
                              }
                        }
                  }
            //-->
            </script>
      </head>

                <body onLoad="JavaScript: sizeIt();">
                                <P><IMG alt="" src="emailTag.jpg"></P>
                                etc...
                </body>
****************************


This works fine for all images on the page, but I am trying to resize only the images within a table (image gallery).  I am wanting it to resize these images within the table to use as thumbnails (then click it to open the full size image).

I'm thinking I could do a function where I pass a reference of the image to the function and it could do something like:

****************************
function sizeIt(imageReference) {
      if (imageReference.width > 100) {
            imageReference.width = 100;
      }
}

and

<IMG alt="" src="emailTag.jpg" onLoad="JavaScript: sizeIt(this);">
****************************

However, as I'm sure you can tell, I'm not a JavaScript guy at all (spend most of my time server-side with .NET and SQL), and so my syntax and thoughts aren't quite in a row.

Any help would be greatly appreciated!

Thanks in advance,
-chris

LVL 6
pillbug22Asked:
Who is Participating?
 
FragMaster_BCommented:
You can get a collection of all images in a table via this method. (This assumes your table has an ID attribute of "myTable".)

[code]
var imgColl = document.getElementById("myTable").getElementsByTagName("IMG")
[/code]

Once you have this collection, you can itterate through it basically the same way you do above.

[code]
for (LC=0; LC<imgColl.length; LC++) {
    if (imgColl[LC].width > 100) {
        imgColl[LC].width = 100;
    }
}
[/code]

Hope this is what you're looking for,
Frag
0
 
pillbug22Author Commented:
Ahhhh...beautiful.....

thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.