Bilder anhand der Auflösung auslesen/anzeigen

[Poex]

Hallo Zusammen,

ich habe ein kleines Problem mit der Anzeige von Bilder in verschiedenen Bildschirmauflösungen.

Anmerkung: die Seite soll für verschiedene Auflösungen konzipiert werde (das ist ja auch kein Problem mit CSS), allerdings muss ich im HTML-Bereich ganz bestimmte Bilder in verschiedenene Auflösungen auslesen/ausgeben können. Es ist wichtig, dass das Skript merkt welche Auflösung vorhanden ist und anhand dessen die richtigen Bilder ausliesst/ausgibt:

Die anzupassenden Bilder sind alle in einem speziellen DIV-Container (id="slider"). Ich habe mir das wie folgt vorgestellt (leider habe ich nicht viel Erfahrung mit Java):

<script language="JavaScript">
var Bildschirmaufloesung = screen.width;

if (Bildschirmaufloesung >= "z.B. 1366")
{
   lese alle Bilder im Container id="slider" aus folgendem Ordner aus: src="images/bilder/1366/"
}
else if (Bildschirmaufloesung >= "z.B. 1920")
{
    lese alle Bilder im Container id="slider" aus folgendem Ordner aus: src="images/bilder/1920/"
}
else
{
    usw...
}
</script>

Ist so etwas überhaupt möglich? Was gebe ich im HTML-Bereich ein, wo die Bilder hinkommen?? Diese muss ich ja direkt in einem Verzeichniss angebe?!

Vielen Dank schon mal für die Hilfe!

MfG
Christoph

[Georg]

Hallo Zusammen,

Ist so etwas überhaupt möglich? Was gebe ich im HTML-Bereich ein, wo die Bilder hinkommen?? Diese muss ich ja direkt in einem Verzeichniss angebe?!

http://www.webmaster-resource.de/browserweiche-nach-auflosung-mit-javascript.php

Dann je nach Auflösung entsprechend Bilder in ein Array laden welche der Auflösung entsprechen

[Poex]

http://www.webmaster-resource.de/browserweiche-nach-auflosung-mit-javascript.php

Dann je nach Auflösung entsprechend Bilder in ein Array laden welche der Auflösung entsprechen

Hi, uhh das ist schon - für meinen Java-Verständinssgrad - recht kompliziert! Sieht das dann so in etwa aus?

<script language="JavaScript">
var Bildschirmaufloesung = screen.width;
if (Bildschirmaufloesung >= "1920")
{
document.images.getElementById("slider") = "images/1920/";
}
else if (Bildschirmaufloesung >= "1366")
{
document.images.getElementById("slider") = "images/1366/";
}
else if (Bildschirmaufloesung >= "1024")
{
document.images.getElementById("slider") = "images/1024/";
}
</script>

HTML-Bereich:

<div id="slider">
  <img src="1.jpg">
</diV>

Ich verstehe nicht so recht wie ich per Java diesen bestimmten Bilddateien bei unterschiedlichen Auflösungen sagen, wo ihre Quellordner sind?!?!

[Matthias Apsel]

Om nah hoo pez nyeetz, Poex!

Hi, uhh das ist schon - für meinen Java-Verständinssgrad - recht kompliziert! Sieht das dann so in etwa aus?

Ich verstehe nicht so recht wie ich per Java diesen bestimmten Bilddateien bei unterschiedlichen Auflösungen sagen, wo ihre Quellordner sind?!?!

auch wenn es dir nicht hilft:

Java und JavaScript sind völlig verschiedene Dinge. Zitat 1672, 141

Matthias

[Georg]

<script language="JavaScript">
var Bildschirmaufloesung = screen.width;

var bildpfad = "";

if (Bildschirmaufloesung >= "1920")
{

bildpfad = "images/1920/";
document.getElementById("slider").innerHTML = '<img src=" +'bildpfad '+ 1.jpg">';

}

</script>

HTML-Bereich:

<div id="slider">

</diV>

Ich verstehe nicht so recht wie ich per Java diesen bestimmten Bilddateien bei unterschiedlichen Auflösungen sagen, wo ihre Quellordner sind?!?!

[Georg]

<script language="JavaScript">
var Bildschirmaufloesung = screen.width;
var bildpfad = "";
if (Bildschirmaufloesung >= "1920")
{
bildpfad = "images/1920/";

document.getElementById("slider").innerHTML = '<img src="' + bildpfad + '1.jpg">';

</script>

[Poex]

<script language="JavaScript">
var Bildschirmaufloesung = screen.width;
var bildpfad = "";
if (Bildschirmaufloesung >= "1920")
{
bildpfad = "images/1920/";
document.getElementById("slider").innerHTML = '<img src="' + bildpfad + '1.jpg">';
</script>

Vielen Dank schon einmal für die tolle Hilfe! Leider funktioniert das noch nicht so richtig. Wenn ich diesen Code nun genau so in den "HEAD" schreibe, wie muss dann der Eintrag im "BODY" genau aussehen?

so?

<div id="slider">
     <img src="1.jpg" width="100%">
     <img src="2.jpg" width="100%">
     <img src="3.jpg" width="100%">
     <img src="4.jpg" id="picwidth">
    </div>

oder kommt in den DIV-Container "slider" überhaupt nichts rein? Wie kriege ich dann die Werte wie "width" oder eine id-Zuweisung in das "img"??

Das ist mein JavaScrip-Code:

<script language="JavaScript">
var Bildschirmaufloesung = screen.width;
var bildpfad = "";
if (Bildschirmaufloesung >= "1920")
{
    bildpfad <= "images/1920/";
    document.getElementById("slider").innerHTML = '<img src="' + bildpfad + '1.jpg">';
}
else if (Bildschirmaufloesung >= "1366")
{
    bildpfad >= "images/1366/";
    document.getElementById("slider").innerHTML = '<img src="' + bildpfad + '1.jpg">';
}
else
{
    bildpfad = "images/normal/";
    document.getElementById("slider").innerHTML = '<img src="' + bildpfad + '1.jpg">';
}
</script>

Nochmal danke für die Hilfe!!!

[Matthias Apsel]

Om nah hoo pez nyeetz, Poex!

<div id="slider">      <img src="1.jpg" width="100%">      <img src="2.jpg" width="100%">      <img src="3.jpg" width="100%">      <img src="4.jpg" id="picwidth">     </div>

oder kommt in den DIV-Container "slider" überhaupt nichts rein? Wie kriege ich dann die Werte wie "width" oder eine id-Zuweisung in das "img"??

Das ist mein JavaScrip-Code:

<script language="JavaScript">

...

bildpfad = "images/normal/";     document.getElementById("slider").innerHTML = '<img src="' + bildpfad + '1.jpg">'; } </script>

Du schreibst mit JavaScript in das div mit der ID slider hinein: <img src="Pfad zum Bild">

Dann darf natürlich im HTML nichts von den Bildern zu sehen sein.

Also im JS: document.getElementById("slider").innerHTML = '<img src="' + bildpfad + '1.jpg" width="100%">'; für jedes Bild

und im HTML

<div id="slider">
</div>

Es lässt sich sicher eleganter mit einer Schleife lösen.

Was soll die ID="picwidth" bezwecken?

Matthias

[Poex]

Also im JS: document.getElementById("slider").innerHTML = '<img src="' + bildpfad + '1.jpg" width="100%">'; für _jedes_ Bild

Hab jetzt noch einal jede Menge getestet, dieser Code schent bei mir einfach nicht zu funktionieren... hab ne neue HTML-Datei geschrieben, komplett leer nur mir diesem Code und den nötigen DIV-Container. Passiert nichts... evtl. irgendwo ein kleiner Fehler drinne?? Ich kann da allerdings nicht finden, mit der JavaScript-Logig kenne ich mich leider zu schlecht aus um da einen Fehler zu erkennen...

so hiert nun mein Code für das JacaScript aus:

<script language="JavaScript">  
var Bildschirmaufloesung = screen.width;  
var bildpfad = "";  
if (Bildschirmaufloesung = "1920")  
{  
    bildpfad = "images/slider-hs/1920/";  
    document.getElementById("slider").innerHTML = '<img src="'+ bildpfad +'1.jpg">';  
    document.getElementById("slider").innerHTML = '<img src="'+ bildpfad +'2.jpg">';  
}  
else if (Bildschirmaufloesung >= "1366")  
{  
    bildpfad = "images/slider-hs/1366/";  
    document.getElementById("slider").innerHTML = '<img src="'+bildpfad+'1.jpg">';  
    document.getElementById("slider").innerHTML = '<img src="'+ bildpfad +'2.jpg">';  
}  
else  
{  
    bildpfad = "images/slider-hs/";  
    document.getElementById("slider").innerHTML = '<img src="'+bildpfad+'1.jpg">';  
    document.getElementById("slider").innerHTML = '<img src="'+ bildpfad +'2.jpg">';  
}  
</script>

[Matthias Apsel]

Om nah hoo pez nyeetz, Poex!

[code lang=javascript]<script language="JavaScript"> var Bildschirmaufloesung = screen.width; var bildpfad = ""; if (Bildschirmaufloesung = "1920")

screen.width ist keine String-Variable sondern eine Zahl. Deshalb nicht "1920" sondern 1920.

Matthias

[Kai345]

[latex]Mae  govannen![/latex]

if (Bildschirmaufloesung = "1920")

screen.width ist keine String-Variable sondern eine Zahl. Deshalb nicht "1920" sondern 1920.

Das sollte nicht das Haupt-Problem sein. (automatische Typ-Umwandlung). Vielmehr wird der Wert nicht verglichen, sondern der Variablen „Bildschirmaufloesung“ zugewiesen.

Stur lächeln und winken, Männer!
Kai

[Matthias Apsel]

Om nah hoo pez nyeetz, Kai345!

Das sollte nicht das Haupt-Problem sein. (automatische Typ-Umwandlung). Vielmehr wird der Wert nicht verglichen, sondern der Variablen „Bildschirmaufloesung“ zugewiesen.

Es soll wohl „>=“ heißen, wie bei den anderen ifs auch.

Matthias

[Poex]

Om nah hoo pez nyeetz, Kai345!

Das sollte nicht das Haupt-Problem sein. (automatische Typ-Umwandlung). Vielmehr wird der Wert nicht verglichen, sondern der Variablen „Bildschirmaufloesung“ zugewiesen.

Es soll wohl „>=“ heißen, wie bei den anderen ifs auch.

Matthias

Hmm wohl doch etwas komplizierter?!

Also mir würde das Ganze auch schon in der Art füllig ausreichen:

<script language="JavaScript">  
var Bildschirmaufloesung = screen.width;  
if (Bildschirmaufloesung >= "1920")  
{  
    document.getElementById("slider").innerHTML = '<img src="images/slider-hs/1920/1.jpg">';  
}  
else if (Bildschirmaufloesung >= "1366")  
{  
    document.getElementById("slider").innerHTML = '<img src="images/slider-hs/1366/1.jpg">';  
}  
else  
{  
    document.getElementById("slider").innerHTML = '<img src="images/slider-hs/1.jpg">';  
}  
</script>

Ich muss quasi nur bestimmen können dass das JavaScript mir bei einer beistimmten Bildschirmauflösung die vorgegebenen Bilder in den genannten Container ausgibt.

[Matthias Apsel]

Om nah hoo pez nyeetz, Poex!

Es ist nicht schön, nicht effizient aber valide und sollte funktionieren.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>bilder</title>
    <style type="text/css">
      #slider { border: 5px solid red;}
      img { border: 2px solid black;}
    </style>
  </head>
  <body>
    <div id="slider">
    </div>
    <script type="text/javascript">
      var bildschirmaufloesung = screen.width;
      var slider = document.getElementById("slider");
      var bildpfad = "";
      if (bildschirmaufloesung >= 1920)
      {
         bildpfad = "images/slider-hs/1920/";
         slider.innerHTML = '<img src="' + bildpfad +'1.jpg" alt="vernünftiger Alternativtext">'
                          + '<img src="' + bildpfad +'2.jpg" alt="falls jemand die Anzeige von Bildern nicht mag">';
      }
      else if (bildschirmaufloesung >= 1366)
      {
         bildpfad = "images/slider-hs/1366/";
         slider.innerHTML = '<img src="' + bildpfad + '1.jpg" alt="vernünftiger Alternativtext">'
                          + '<img src="' + bildpfad + '2.jpg" alt="falls jemand die Anzeige von Bildern nicht mag">';
      }
      else
      {
         bildpfad = "images/slider-hs/";
         slider.innerHTML = '<img src="' + bildpfad +'1.jpg" alt="vernünftiger Alternativtext">'
                          + '<img src="' + bildpfad +'2.jpg" alt="falls jemand die Anzeige von Bildern nicht mag">';
      }
    </script>
  </body>
</html>

Matthias

[Poex]

Om nah hoo pez nyeetz, Poex!

Es ist nicht schön, nicht effizient aber valide und sollte funktionieren.

Matthias

Wahnsinn - Es funktioniert jetzt endlich!!! Vielen, lieben Dank für die Hilfe. Ich hätte es so wahrscheinlich nie hinbekommen...

[Matthias Apsel]

Om nah hoo pez nyeetz, Poex!

Wichtige Ergänzung, da es auch Leute geben soll, die ohne JS unterwegs sind:

<div id="slider">
  <noscript>
    <img src="images/slider-hs/1.jpg" alt="Alternative für Leute ohne JS">
  </noscript>
</div>

Alles was zwischen <noscript> und </noscript> steht wird nur ausgeführt, wenn das Script nicht ausgeführt werden kann.

Matthias

[MudGuard]

Hi,

Anmerkung: die Seite soll für verschiedene Auflösungen konzipiert werde (das ist ja auch kein Problem mit CSS), allerdings muss ich im HTML-Bereich ganz bestimmte Bilder in verschiedenene Auflösungen auslesen/ausgeben können. Es ist wichtig, dass das Skript merkt welche Auflösung vorhanden ist und anhand dessen die richtigen Bilder ausliesst/ausgibt:

Warum willst Du Dich an einer vollkommen irrelevanten Größe orientieren?

cu,
Andreas

[Matthias Apsel]

Om nah hoo pez nyeetz, Poex!

ich habe ein kleines Problem mit der Anzeige von Bilder in verschiedenen Bildschirmauflösungen.

Du meinst sicher die Größe des Bildschirms. Die Auflösung wäre Bildpunkte je Flächeneinheit.

Die ist unwichtig. Man muss sein Browserfenster nicht maximiert betreiben und selbst dann können noch Sidebars oder die Taskleiste eine Rolle spielen.

Du meinst sicher die Größe des Browserfensters.

Die ist unwichtig. Es gibt Scrollbalken, diverse Menüleisten, Statusleiste ... Viele wissen nicht, dass die Browser einen Vollbildmodus haben (meist F11) und die Größe des Browsers dann nah an der Bildschirmgröße ist

Du meinst die Größe des Viewports, also den Platz, der tatsächlich für die Anzeige des Dokumentes zur Verfügung steht.

Anmerkung: die Seite soll für verschiedene Auflösungen konzipiert werde (das ist ja auch kein Problem mit CSS),

Anmerkung: eine Seite soll für jede Kombination aus Viewportgröße und Zoomfaktor konzipiert sein.

allerdings muss ich im HTML-Bereich ganz bestimmte Bilder in verschiedenene Auflösungen auslesen/ausgeben können. Es ist wichtig, dass das Skript merkt welche Auflösung vorhanden ist und anhand dessen die richtigen Bilder ausliesst/ausgibt:

Was ist dein Beweggrund, dies anzunehmen?

Die anzupassenden Bilder sind alle in einem speziellen DIV-Container (id="slider"). Ich habe mir das wie folgt vorgestellt (leider habe ich nicht viel Erfahrung mit Java):

<script language="JavaScript"> ... </script>

Wieviele Fälle willst du unterscheiden?

Eine Lösung wäre:

<!DOCTYPE html>
<html>
  <body onload="alert('Sie verwenden eine falsche Bildschirmauflösung!')">
  </body>
</html>

;-)

Matthias

[Der Martin]

Hallo,

ich habe ein kleines Problem mit der Anzeige von Bilder in verschiedenen Bildschirmauflösungen.
Du meinst sicher die Größe des Bildschirms. Die Auflösung wäre Bildpunkte je Flächeneinheit.

nein, die Bildschirmauflösung, also die Auflösung des gesamten Bildschirms, ist die Gesamtzahl der Pixel. Üblicherweise als Breite mal Höhe angegeben. Nur ohne konkreten Bezug ist die Auflösung tatsächlich die Zahl der Pixel pro Fläche (oder pro Länge, etwa 120dpi).

Du meinst sicher die Größe des Browserfensters.

Richtig.

Die ist unwichtig. Es gibt Scrollbalken, diverse Menüleisten, Statusleiste ...

Richtig, und was dann vom Programmfenster noch für die Anzeige der Nutzdaten übrig bleibt, ist das eigentliche Browserfenster, gelegentlich auch Viewport genannt.

Ciao,
 Martin

[Matthias Apsel]

Om nah hoo pez nyeetz, Der Martin!

Die ist unwichtig. Es gibt Scrollbalken, diverse Menüleisten, Statusleiste ...

Richtig, und was dann vom Programmfenster noch für die Anzeige der Nutzdaten übrig bleibt, ist das eigentliche Browserfenster, gelegentlich auch Viewport genannt.

schrieb ich das nicht? Nach den ... ging es weiter

Du meinst die Größe des Viewports, also den Platz, der tatsächlich für die Anzeige des Dokumentes zur Verfügung steht.

Matthias

[Poex]

allerdings muss ich im HTML-Bereich ganz bestimmte Bilder in verschiedenene Auflösungen auslesen/ausgeben können. Es ist wichtig, dass das Skript merkt welche Auflösung vorhanden ist und anhand dessen die richtigen Bilder ausliesst/ausgibt:

Was ist dein Beweggrund, dies anzunehmen?

Noch einmal konkret zu meinem Anliegen:
Die Seite sollte immer vollständig an dem Viewport ausgerichtet sein ohne scrollen zu müssen. Die Seite soll aber immer möglichst viel vom Viewport ausfüllen. Bei der Seite geht es um Fotos und einen Bildwechsler in der diese Fotos in einer Diashow der Reihe nach gezeigt werden. Damit die Fotos bei einer höhen Auflösung gut aussehen, muss ich diese auch entsprechend skalieren. Wenn nun der Viewport aufgrund einer niedrigen Browserfenstergrösse kleiner als "XY" ausfällt, werden die Fotos auch automatisch kleiner skaliert. Das funktioniert auch, allerdings muss der Rechner dann immer alle Bilder erst runterrechnen/skalieren (diese liegen ja nur in der besten Auflösung vor) und daraus eine Slideshow generieren mit "Fade-Effekt" für die Übergänge. Das führt dann direkt zu einer starken Systembelastung und die Seite funktioniert nicht mehr flüssig...

Deswegen die Auslese der Bilder aus verschiedenen Quellen bei verschiedenen Browserfenstergrössen.

Christoph