Javascript: <img> tag, using a given width/height, get proportions right

1

Sorry for the cryptic post title, here’s what’s bugging me:

I have an array containing relative paths of images and whether they are taller than they are wide.

Using javascript I want to display a random image every x seconds (this is for an active desktop)

The arrayFile.js is set like this, imgArray = (‘file1.jpg,wider’,’‘file2.jpg,taller’…);

  
<head>
<script src="arrayFile.js"></script>
<script language="JavaScript">
 function init(){
     randomImageNumber = Math.round(Math.random()*imgArray.length);
     if(imgArray[randomImageNumber].split(',')[1] == 'taller'){
	document.images['tt'].height = "768";
     }else{
        document.images['tt'].width = "1024";       
     }
     document.images['tt'].src = 'path\/'+imgArray[randomImageNumber].split(',')[0];
     setTimeout('init()',5000);
     }
	</script>
</head>

And in the body:


   <body onload="init()">
	<img src='' name='tt'>
   </body>

Now the images get displayed every 5 seconds BUT proportions get mixed up. If the image is wide, it will use a 1024 pixel width but also the previous image’s height, which means that very quickly all the images become 1024x768 regardless of the real width/height proportions (and a 2000x1000px image looks MUCH better using 1024x512pxs than 1024x768px)

Long story short, how can I tell internet explorer to figure out the length of the shorter side by itself. I’ve tried ‘emptying’ width height variables:

     if(imgArray[randomImageNumber].split(',')[1] == 'taller'){
        document.images['tt'].width = "";
        document.images['tt'].height = "768";
     }else{
        document.images['tt'].height = "";       
        document.images['tt'].width = "1024";       
     }

But all i get are 0x768px or 1024x0px images.

Have I confused everyone or is someone able to help ?

Thanks !

mlk