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

[Anonymous]

document.write('<img src="'+css_file+'" alt="" border="0">');

Müsste es nicht heißen
document.write('<img src="'+css_file+'" alt="" border="0">');

(Der zweite Backslash sitzt falsch!)

[MudGuard]

Hi,

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.

Was hat die Auflösung damit zu tun?

<script language="JavaScript">

type-Attribut fehlt.

<!--
var klein  = (document.layers) ? ('../common/css/format_800.css') : ('../common/css/format_800.css');

Was soll die Netscape-Sonderabfrage, wenn dann doch beide Werte jeweils gleich sind?

<script language="JavaScript">

type-Attribut fehlt.

<!--
var klein  = (document.layers) ? ('pics/800/pic1_800.jpg') : ('pics/800/pic1_800.jpg');

Wieder unsinnige Abfrage auf Netscape...

document.write('<img src="'+css_file+'" alt="" border="0">');

Der erste Backslash sitzt falsch.

cu,
Andreas

[danny_selfhtml]

Hi Andreas

Was hat die Auflösung damit zu tun?

Ganz einfach. Es gibt für die Auflösungen 1024x768 und 800x600 jeweils  eine eigene css-datei. Die auf der Site verwendeten Bilder möchte ich aber nicht mit heigth und width manipulieren, sieht nämlich unschön aus, sondern ich habe für beide Auflösungen jeweils optimierte bilder, welche aber bei entsprechender Auflösung dynamisch per Script eingebunden werden sollen.

Was soll die Netscape-Sonderabfrage, wenn dann doch beide Werte jeweils gleich sind?

Da hast du wohl recht und ich bitte dies zu entschuldigen. Ich habe diesen Code einfach kopiert und einfach so angepasst das er bei mir funktioniert, übrigens sogar bei ie. Ich wußte garnicht das document.layers speziell was mit netscape zu tun hat. Aber man lernt ja nie aus.

Also nochmal zu meinem Problem zurück. Es gibt in der Site div-Container für die entsprechenden Elemente (Bilder etc.). Ich möchte via Script die Auflösung abfragen (wie oben a la Netscape) und dann via document.write das für die Auflösung optimiterte Bild dynamisch einbinden.

Hast du da vielleicht eine andere Lösung, oder besser noch eine die funktioniert, was meine nicht tut.

mfg

daniel