asked on

How to auto-resize photos inside table cell?

Dear EE experts,

We would like to ask for tech support on how to set the photos inside our table cell resize automatically if the table width expands...
You may see it here: http://www.cssasia.info/ste/ste-landscape-units1.asp?SeriesID=184

If the photos that we uploaded reached 5 photos, it will expand its size, but the photo above stays the same (size)...

<HTML>
<head>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

theImages[0] = 'IMG/xg-header-00.jpg'
theImages[1] = 'IMG/xg-header-01.jpg'
theImages[2] = 'IMG/xg-header-02.jpg'
theImages[3] = 'IMG/xg-header-03.jpg'
theImages[4] = 'IMG/IL-header.jpg'

// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

//  End -->
</script>


</head>
<body>
<td>
    	<SCRIPT LANGUAGE="JavaScript">
    	<!-- Begin
		showImage();
		//  End -->
		</script>
</td>
</body>

</HTML>

Open in new window

Please see the attached embed script...
That is the script for the changing photos above...

Sar1973

In previous HTML could have been:
<myTable ID="myTableID" onresize="myFunction">

<script type="text/javascript">
function myFunction() {
var newWidth=document.getElementByID("myTableID").width;
document.getElementByID("myPictureID").width=newWidth;
}
</script>

Stiebel Eltron

ASKER

Hi Sar1973! Thank you for your response...

We're quite confused, what do you mean by "In previous HTML could have been..."?

Though we only have that code, same code in every page.

Please explain...

Thank you!

Sar1973

I mean that the width property is not supported in HTML5 (see http://www.w3schools.com/tags/tag_table.asp).

Scott Fell

Sar1973, I do think you are on to the answer here, http:Q_28250136.html#a39523845

I would use javascript or jquery to determine the width of each td you will be placing an image in. Once you know the width of the TD, you can size the width of the image. As long as all images have the same width/height ratio it will be easy.

Sar1973

I think that my comment didn't neither include or exclude any eventuality and was useful for stiebel: why punctualising and enphatising it so much...?

ASKER CERTIFIED SOLUTION

Scott Fell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Stiebel Eltron

ASKER

That is what we need... Thank you so much Padas!