Solved

HTML Resize image based on the TD width

Posted on 2004-04-07
10
747 Views
Last Modified: 2012-08-13
Can anyone please tell me how to increase the image size based on width.

I got a reply for this I am pasting the code below

 Comment from dgelinas
Date: 03/30/2004 05:33AM PST
 Comment  


sure,

</script>
function resizeImage() {
  document.getElementById('img1').width =  document.getElementById('td1').offsetWidth
}
<script>



  <td id='td1'>
  <img id='img1' src='/images/whatever.gif'>

 
Comment from dgelinas
Date: 03/30/2004 06:10AM PST
 Comment  


better yet here's a working test I used.. obviously you won't have my image but you can replace it with yours

<html>
<head>
<script language="javascript" type="text/javascript">
function resizeImage() {
  document.getElementById('img1').width =  document.getElementById('td1').offsetWidth
}
</script>

</head>

<body onLoad="resizeImage()">


<table width="183"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id='td1'><img id='img1' src="logo2.gif" width="5" height="50"></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>  

</body>
</html>
 
 
BUT THE ABOVE CODE works if there is one image and TD . I am generating images and TD dynamically. How should I go about doing this.

Please guide me.
0
Comment
Question by:BLN2004
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 28

Expert Comment

by:peakpeak
ID: 10781679
Maybe like this ...

function resizeOneImage(imgname, tdid)
 {
  document.getElementById(imgname).width =  document.getElementById(tdid).offsetWidth
}

function getElementsById(imgname, id)
{
  var inc = 0;
  var alltags = document.all ? document.all : document.getElementsByTagName("*");
  for (i = 1; i < alltags.length; i++)
    if (alltags[i].id == id)
      reziseOneImage(imgname, id);
}
<body onload="getElementsById('img1', 'td1');" >
....
<td id='td1'><img id='img1' src="logo1.gif" width="5" height="50"></td>
<td id='td1'><img id='img1' src="logo2.gif" width="5" height="50"></td>
<td id='td1'><img id='img1' src="something_else.gif" width="5" height="50"></td>
....
</body>

Regards
Peter
0
 
LVL 28

Accepted Solution

by:
peakpeak earned 50 total points
ID: 10782081
Oops, forget my previous post, here's a working one
Select te same id for every <td> and <img>, different name for each <img>
onLoad="resizeImages('b');" with the <td> and <img> id

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT type="text/javascript">
<!--
function resizeOneImage(imgname, tdid)
{
      document.getElementById(imgname).width =  document.getElementById(tdid).offsetWidth;
}
var fields = new Array();      // Global array for the field objects we want
////////////////////////////////////////////////
// Resize all images with a specific id
//
function resizeImages(id)
{
      var inc = 0;
      var alltags = document.all ? document.all : document.getElementsByTagName("*");
      for (i = 1; i < alltags.length; i++)
      {
            if (alltags[i].id == id)
            {
                  fields[inc++] = alltags[i];      // Save the object in the array
            }
      }
      for (i = 0; i < fields.length; i++)      
      {
            if (fields[i].name)
                  resizeOneImage(fields[i].name, id);
      }
      return inc;
}
//-->
</SCRIPT>
</head>
<BODY onLoad="resizeImages('b');">
<table width="280"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="b"><img id='b' name="img1" src="imgage1.gif"></td>
    <td id="b"><img id='b' name="img2" src="imgage2.gif"></td>
    <td id="b"><img id='b' name="img3" src="other.gif"></td>
  </tr>
</table>
</body>
</html>

Regards
Peter

0
 
LVL 7

Assisted Solution

by:TheKenman
TheKenman earned 50 total points
ID: 10783014
Hi BLN2004,

Try this:

   <html>
   <head>
   <script language="javascript">  
   function resiz() {
      var imgs = document.images;
      for(i=0;i<imgs.length;i++)
      {
      var img = imgs[i];
         if (document.all) {
            img.width = img.parentElement.width;
            img.height = img.parentElement.height;  
         } else {
            img.width = img.parentNode.width;
            img.height = img.parentNode.height;  
         }
      }
   }
   </script>  
   </head>
   <body onLoad="resiz();">
   <table width="183"  border="0" cellspacing="0" cellpadding="0">
     <tr>
       <td id='td1'><img id='img1' src="logo2.gif" width="5" height="50"></td>
     </tr>
     <tr>
       <td></td>
     </tr>
   </table>
   </body>
   </html>
0
Business Impact of IT Communications

What are the business impacts of how well businesses communicate during an IT incident? Targeting, speed, and transparency all matter. Find out more in this infographic.

 
LVL 2

Expert Comment

by:dgooding
ID: 10783299
0
 
LVL 6

Expert Comment

by:Reapz
ID: 10787979
Setting the width and height of the image to 100% means it will stretch and shrink to fit the table cell it occupies. As the user resizes their browser window your picture will resize automatically.
0
 

Author Comment

by:BLN2004
ID: 10820088
I tried the below code

<html>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT type="text/javascript">
<!--
function resizeOneImage(imgname, tdid)
{
     document.getElementById(imgname).width =  document.getElementById(tdid).offsetWidth;
}
var fields = new Array();     // Global array for the field objects we want
////////////////////////////////////////////////
// Resize all images with a specific id
//
function resizeImages(id)
{
     var inc = 0;
     var alltags = document.all ? document.all : document.getElementsByTagName("*");
     for (i = 1; i < alltags.length; i++)
     {
          if (alltags[i].id == id)
          {
               fields[inc++] = alltags[i];     // Save the object in the array
          }
     }
     for (i = 0; i < fields.length; i++)    
     {
          if (fields[i].name)
               resizeOneImage(fields[i].name, id);
     }
     return inc;
}
//-->
</SCRIPT>
</head>
<BODY onLoad="resizeImages('b');">
<table width="280"  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="b"><img id='b' name="img1" src="imgage1.gif"></td>
    <td id="b"><img id='b' name="img2" src="imgage2.gif"></td>
    <td id="b"><img id='b' name="img3" src="other.gif"></td>
  </tr>
</table>
</body>
</html>


THE IMAGE IS SMALL IN THE FIRST CELL SLOWLY IT INCREASSES IN THE LAST CELL IT FITS THE TD
0
 
LVL 7

Expert Comment

by:TheKenman
ID: 11938972
I recommend a split between peakpeak and myself :)
0

Featured Post

Industry Leaders: 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

Suggested Solutions

Title # Comments Views Activity
ebay messages api 6 41
Display if field is NOT "" or NOT null 6 37
SP converting date time to date and time separately 2 40
Natural height and jquery 6 40
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

738 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