BLN2004
asked on
HTML Resize image based on the TD width
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('i mg1').widt h = document.getElementById('t d1').offse tWidth
}
<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('i mg1').widt h = document.getElementById('t d1').offse tWidth
}
</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.
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('i
}
<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('i
}
</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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
ASKER
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(im gname).wid th = document.getElementById(td id).offset Width;
}
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.getElementsByTagN ame("*");
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].n ame, 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
<html>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<SCRIPT type="text/javascript">
<!--
function resizeOneImage(imgname, tdid)
{
document.getElementById(im
}
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.getElementsByTagN
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].n
}
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
I recommend a split between peakpeak and myself :)
function resizeOneImage(imgname, tdid)
{
document.getElementById(im
}
function getElementsById(imgname, id)
{
var inc = 0;
var alltags = document.all ? document.all : document.getElementsByTagN
for (i = 1; i < alltags.length; i++)
if (alltags[i].id == id)
reziseOneImage(imgname, id);
}
<body onload="getElementsById('i
....
<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