dynamically resizing images

using old-school html

[iceless]

i have a family website that primarily is being used to display pictures. the general page layout is to have a link on the left side of the window for each picture, and an iframe that displays the picture linked to. i would like to be able to change the size of the displayed image based on the browser being used to view the site. for example, if using 800x600, i might display the image as 480x360, whereas a browser set to 1072x768 i'd use 640x480.

i cannot find anything that would let me do that with the framework of using frames or iframes, as all the height and width references are to the frame itself, not the image being shown. and i cannot find another way other than frames to do this. am i missing something?

is there any 'old-school' (translation: not php or asp) way of accomplishing this?

thanx,
iceless.

[tedster]

Welcome to WebmasterWorld, iceless.

The references to the image dimensions belong in the frame's html document, within the IMG element, and not in the parent document. You could use javascript to write those dimensions differently, depending on resolution.

For sample code, see message #21 from rcjordan in our generic javascript [webmasterworld.com] thread.

And beware of a double edged sword here. If you use a small image and size it up, then it visibly pixelates. And if you use a larger image and size it down, then you're requiring more bandwidth than is needed. If you don't want to create several different versions of the images, sizing down will give better results, IMO.

[iceless]

thanx, tedster. this looks like a great place for ideas.

i tried the link in your reply, and got prompted for a userid and password again. when i put in iceless and my password, it came back with the same login screen again. am i missing something?

iceless

[iceless]

hi, tedster.

ok, now that i'm at home i can c/p the code in that i'm using. it's pretty simple.

<table width=100% border=0>
<tr>
<td valign=top> <font size=2>
<iframe name=right
scrolling=no
src="pictures/js_stujackie.jpg"
height=360
width=480
marginheight=0
marginwidth=0
frameborder=0
align=right>
</iframe>

<a href="pictures/js_peterjackiestu2.jpg" target=right>pjs2 </a><br>
<a href="pictures/js_peterjackiestu5.jpg"
target=right>pjs5 </a><br>
<a href="pictures/js_peterjackiestu6.jpg" target=right>pjs6 </a><br>
</td>
</tr>
</table>

that's it. clicking the link displays the 'clicked' picture in the frame.

i tried adding height and width to the links:

<a href="pictures/js_peterjackiestu2.jpg"
height=360 width=480 target=right>pjs2 </a><br>

but that didn't work either.

HELP!

tia,
iceless.