Grafiken dynamisch auswählen

[danny_selfhtml]

Mahlzeit

ich habe meine website mit div-containern gelayoutet (wortneuschöpferisch):-)). Ich möchte das sich das in einem div-block referenzierte bild dynamisch an die Auflösung anpasst.

Ein ähnliches Problem hatte ich schon mit der dynamischen Anpassung der kompletten Site an die Auflösung. Dies habe ich folgendermaßen gelöst:

<script language="JavaScript">
<!--

var klein  = (document.layers) ? ('../common/css/format_800.css') : ('../common/css/format_800.css');
var mittel = (document.layers) ? ('../common/css/format_1024.css') : ('../common/css/format_1024.css');
var gross  = (document.layers) ? ('../common/css/format_1024.css') : ('../common/css/format_1024.css');
var css_file = (screen.width < 1024) ? (klein) : ((screen.width == 1024) ? (mittel) : (gross));
document.write('<link rel="stylesheet" href="'+css_file+'" type="text/css">');

//-->
</script>

Hier wird jetzt also eine der Auflösung entsprechende Css-Datei dynamisch in die Site eingebunden. Das gleiche Prinzip möchte ich nun auf ein bild anwenden. Das hatte ich mir dann so ausgemalt:

<div id="pic1_box">

<script language="JavaScript">
 <!--

var klein  = (document.layers) ? ('pics/800/pic1_800.jpg') : ('pics/800/pic1_800.jpg');
var mittel = (document.layers) ? ('pics/800/pic1_1024.jpg') : ('pics/800/pic1_1024.jpg');
var gross  = (document.layers) ? ('pics/800/pic1_1024.jpg') : ('pics/800/pic1_1024.jpg');
var css_file = (screen.width < 1024) ? (klein) : ((screen.width == 1024) ? (mittel) : (gross));
document.write('<img src="'+css_file+'" alt="" border="0">');

//-->
</script>

</div>

Nur leider wird das Bild nicht angezeigt, denke habe nur einen syntaxfehler. Wer kann mir dabei bitte behilflich sein?

mfg

daniel