Grafiken für verschieden Auflösungen laden

[Michael Virnstein]

Ich habe ein Problem mit javascript. Wie kann ich ich es schaffen, daß bei verschiedenen Bildschirmauösungwen, verschiede Bilder in ein HTML Objekt geladen werden. In meinem Fall ist das <td>. Die Grafik soll von anfang an mitgeladen werden und nicht erst durch einen eventhandler gestartet werden. ich habe für ie folgendes script gemacht, das läßt sich nur über einen event handler machen. Da diese Graphik aber von anfang an erscheinen soll, möchte ich wie gesagt, daß sie von anfang an mitgeladen wird.
/***********************************************************************************************************/
var eins =  "<br><img align=center alt=THC The Hallucinogenic Clan src=image/thclogo_kl.gif>";
var zwei = "<img align=center alt=THC The Hallucinogenic Clan src=image/thclogo_kl.gif width=82 height=84>";
var drei = "<img align=center alt=THC The Hallucinogenic Clan src=image/thclogo_kl.gif width=72 height=74>";
function Bildladen()
{
if ((screen.height == 1024) && (screen.width == 1280))
{
document.all.laden.innerHTML = eins;
}
else if ((screen.height == 768) && (screen.width == 1024))
{
document.all.laden.innerHTML = zwei;
}
else if ((screen.height == 600) && (screen.width == 800))
{
document.all.laden.innerHTML = drei;
}
else document.all.laden.innerHTML = drei;
}
/***********************************************************************************************************/
ich habe leider auch keine erfahrung mit javascript und hab das script mehr durch learning by doing erstellt.
Wie kann ich mein Problem lösen und wie kann ich das in DHTML machen?

Danke

Michael Virnstein

[Antje Hofmann]

Hallo Michael,

ich werde mal versuchen, etwas Ordnung reinzubringen. Getestet habe ich das ganze aber nicht. Ich gehe es mal nur so durch.

In meinem Fall ist das <td>.

hier muß auf alle Fälle rein <td id="laden">
und die Anführungsstriche nicht vergessen, maskiere Sie mit " also:

var eins =  "
<img align=center alt="THC The Hallucinogenic Clan" src="image/thclogo_kl.gif">"; usw.

function Bildladen()
{
if ((screen.height == 1024) && (screen.width == 1280))
{
document.all.laden.innerHTML = eins;
}
else if ((screen.height == 768) && (screen.width == 1024))
{
document.all.laden.innerHTML = zwei;
}
else if ((screen.height == 600) && (screen.width == 800))
{
document.all.laden.innerHTML = drei;
}
else document.all.laden.innerHTML = drei;
}

AUf den ersten Blick sieht der Syntax in Ordnung aus. Allerdings wird er nur im IE ab der 4 angewendet. Der Navigator kennt innerHTML nicht.

Ich persönlich würde das ganze mit document.write() lösen. Noch ein Problem: viele Anwender benutzen kleiner Fenster, trotz hoher Auflösung, die berücksichtigst du nicht.

Viele Grüße

Antje

[Joachim]

Hallo,

Noch ein Problem: viele Anwender benutzen kleiner >>Fenster, trotz hoher Auflösung, die berücksichtigst du nicht.

ich z. B. ;-)
Es macht sicher mehr Sinn, self.innerWidth (fuer NC) und document.body.clientWidth (fuer IE) abzufragen. Hoehe geht analog mit Height.

Gruss Joachim

[Michael Virnstein]

Hallo Michael,

ich werde mal versuchen, etwas Ordnung reinzubringen. Getestet habe ich das ganze aber nicht. Ich gehe es mal nur so durch.

In meinem Fall ist das <td>.

hier muß auf alle Fälle rein <td id="laden">
und die Anführungsstriche nicht vergessen, maskiere Sie mit " also:

Danke erstmal!
Ok. daß mit den Anführungstrichen, wußte ich nicht. Aber id="laden" hab schon gemacht.

var eins =  "
<img align=center alt="THC The Hallucinogenic Clan" src="image/thclogo_kl.gif">"; usw.

function Bildladen()
{
if ((screen.height == 1024) && (screen.width == 1280))
{
document.all.laden.innerHTML = eins;
}
else if ((screen.height == 768) && (screen.width == 1024))
{
document.all.laden.innerHTML = zwei;
}
else if ((screen.height == 600) && (screen.width == 800))
{
document.all.laden.innerHTML = drei;
}
else document.all.laden.innerHTML = drei;
}

AUf den ersten Blick sieht der Syntax in Ordnung aus. Allerdings wird er nur im IE ab der 4 angewendet. Der Navigator kennt innerHTML nicht.

Ich persönlich würde das ganze mit document.write() lösen. Noch ein Problem: viele Anwender benutzen kleiner Fenster, trotz hoher Auflösung, die berücksichtigst du nicht.

Mir kommt es auch nicht darauf an, ob die Anwender kleine Fenster verwenden oder nicht, ich möchte nur erreichen, daß bei den gängigsten Auflösungen, die Seite identisch aussieht.
Das Script war also in Ordnung, trotzdem muß ich einen EventHandler benutzten, damit das geladen wird. Wenn ich onload benutze, passiert gar nichts, deshalb habe ich
<!--    -->
<td id="laden" onmouseover="Bildladen()" onmouseout="Bildladen()">
<--     -->
verwendet. Wie schaff ich aber, daß die Grapfik wie jede normale Graphik geladen wird und gibt es gar keine Möglichkeit, ds mit dem NN hinzubekommen?
Dein Vorschlag mit document.write() funktioniert auch irgendwie nicht richtig, denn dann wird immer eine Seite angezeigt, die nur das Bild enthält und sonst nichts.

Viele Grüße

Antje

Von mir zurück und nochmals Danke

Michael Virnstein

[Antje Hofmann]

Hallo Michael,

Dein Vorschlag mit document.write() funktioniert auch irgendwie nicht richtig, denn dann wird immer eine Seite angezeigt, die nur das Bild enthält und sonst nichts.

Versuche mal folgendes:

<td><script language="JavaScript">
<!--
if((screen.height == 768) && (screen.width == 1024))
document.write("<img align="center" alt="THC The Hallucinogenic Clan" src="..">");
else document.write("<img align="center" alt="THC The Hallucinogenic Clan" src="..">");
//-->
</script>
<noscript><img align="center" alt="THC The Hallucinogenic Clan" src=".."></noscript> </td>

Also direkt innerhalb der Tabellenzelle das Script zu schreiben. Dann wird beim Laden das passende Bild geschrieben und du kannst dir alles andere sparen.
Das funktioniert in beiden Browser.
Der noscript-Teil ist dann für die Browser ohne JS.

Viele Grüße

Antje