Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

AutoResize images inside of table?

Posted on 2003-11-19
2
Medium Priority
?
326 Views
Last Modified: 2012-06-27
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

0
Comment
Question by:pillbug22
2 Comments
 
LVL 1

Accepted Solution

by:
FragMaster_B earned 400 total points
ID: 9780393
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
 
LVL 6

Author Comment

by:pillbug22
ID: 9780492
Ahhhh...beautiful.....

thanks!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question