Mit Javascript erzeugte Bildobjekte werden nicht eingebunden!

[Yadgar]

High!

Das Navigationsleistenproblem konnte ich lösen - es stellte sich als unnötig heraus (zumindest bei den gängigen Auflösungen 800 x 600, 1024 x 768, 1280 x 1024 und 1600 x 1200 - man kann wohl davon ausgehen, dass heutzutage niemand mehr mit 640 x 480 unterwegs ist, erst da würde es wirklich zu eng auf der Navigationsleiste werden), die Grafikelemente proportional zur Bildschirmauflösung zu skalieren.

Was mir allerdings jetzt Kopfzerbrechen bereitet, ist eine Reihe von "Galerie"-Seiten mit jeweils sechs kleinen Vorschaubildern, unter denen beim Überfahren mit der Maus das jeweilige Bild in einer größeren Version (proportional zur Bildschirmauflösung skaliert) angezeigt wird.

Die Programmierung dieser mouseOver-Funktion war kein Problem (siehe Code, Funktionen display() und remove() - leider stellte ich beim Austesten fest, dass trotz proportionaler Skalierung in kleineren Auflösungen die Großbilder immer noch das Fenster sprengen und das Anzeigen einer vertikalen Scrollleiste bewirken, die wiederum die Bedienung der Galerie zu einer wackeligen Angelegenheit macht (ich hoffe, ihr könnt euch vorstellen, was ich meine).

Der Grund ist einfach der, dass die Vorschaubilder nicht mitskaliert werden - und hier fängt es an, merkwürdig zu werden: da außer Netscape 6.x kein Browser die nachträgliche Änderung von img.height bzw. .weight erlaubt, programmierte ich eine Zusatzroutine für die beim Laden gestartete scale()-Funktion (wählt verschieden große vorgehaltene Versionen des Hintergrundbildes entsprechend der Bildschirmauflösung aus), die die sechs Vorschaubilder als Objekte anlegt, mit konkreten Dateien verknüpft und Anzeigegrößen festlegt:

img = new Array(6);
    for (i=0; i<6; i++)
    {
       img[i]=document.createElement("img");
       img.src="mustafa_00.jpg";
       img.height = h/8.533; // Bildschirmauflösung vertikal,
       img.width = h/6.4;    // weiter oben definiert
       img.border = 0;
       document.getElementsByTagName("td")[0].appendChild(img[i]);
    }

und dann in die vorhandene Tabellenstruktur der Galerie einfügen soll. Aber es werden überhaupt keine Bilder, sondern nur Platzhalter angezeigt! Wieso?

Bis bald im Khyberspace!

Yadgar

[frankx]

Hellihello

img = new Array(6);
    for (i=0; i<6; i++)
    {
       img[i]=document.createElement("img");
       img.src="mustafa_00.jpg";

gibts vielleicht nicht nicht, sondern eher: img[i].setAttribute("src","mein.jpg");

oder besser img[i]=new Image(); // oder ohne Klammern.
dann geht img[i].src=...;

Gruß,

frankx

[Yadgar]

High!

frankx:

gibts vielleicht nicht nicht, sondern eher: img[i].setAttribute("src","mein.jpg");

oder besser img[i]=new Image(); // oder ohne Klammern.
dann geht img[i].src=...;

Nein, ich sehe es gerade, der Grund ist einfach der, dass ich teilweise den Indexwert vergessen habe! Mittlerweile klappt es... aber jetzt taucht das nächste Problem auf: in der ursprünglichen, statischen Version haben die Vorschaubilder als onClick-Wert den Aufruf der Funktion display(n), die im unteren Teil der Tabelle die große Version des jeweiligen Bildes aufruft.

Das Dumme ist allerdings, dass diese Funktion im selben Skript definiert ist wie scale()... wie kann ich denn jetzt den Aufruf von display() im onclick-Attribut von img[i] unterbringen?

Bis bald im Khyberspace!

Yadgar

[frankx]

Hellihello

Das Dumme ist allerdings, dass diese Funktion im selben Skript definiert ist wie scale()... wie kann ich denn jetzt den Aufruf von display() im onclick-Attribut von img[i] unterbringen?

Könnte die Frage auch lauten, ob sich das ohne Parameterübergabe lösen ließe? Die Funktionen img[i].onclick können ja mit "this" auf das Image-Objekt zugreifen, und zB. dessen src (this.src) oder id auslesen. vielleicht  s.a.

Gruß,

frankx

[Yadgar]

High!

Könnte die Frage auch lauten, ob sich das ohne Parameterübergabe lösen ließe? Die Funktionen img[i].onclick können ja mit "this" auf das Image-Objekt zugreifen, und zB. dessen src (this.src) oder id auslesen. vielleicht  s.a.

Ich glaube nicht, dass das so ohne weiteres geht - anders als in deinem Beispiel werden die Bildobjekte nicht unsichtbar schon im HTML-Skript vorgehalten, sondern erst beim Aufruf der Funktion überhaupt erzeugt!

Hier ist mein Code:

var w=screen.width;
  var h=screen.height;
  function display(n)
  {
    var lowerCell = document.getElementsByTagName("td")[6];
    bigPic = document.createElement("img");
    if (n<10) leadingZero="0";
    else leadingZero="";
    bigPic.src="mustafa_" + leadingZero + n.toString(10) + ".jpg";
    iw = bigPic.width;
    ih = bigPic.height;
    if (ih > 680)                // falls das Bild höher ist als 680 Pixel, wird die Höhe auf 600 Pixel begrenzt
    {                            // und die Breite proportional angepasst
      scf=600/ih;
      ih=600;
      iw=iw*scf;
    }
    bigPic.width=iw*(w/1280)*0.95; // Anpassung der Bildseitenlängen an die Bildschirmauflösung
    bigPic.height=ih*(h/1024)*0.95;
    lowerCell.appendChild(bigPic);
  }

Ist dein Vorschlag der einzige praktikable Weg, den skalierten Bildern "Links" zu den jeweiligen Großbildern mitzugeben? Mir kommt das alles rasend kompliziert vor...

Bis bald im Khyberspace!

Yadgar

[frankx]

Hellihello

Ich glaube nicht, dass das so ohne weiteres geht - anders als in deinem Beispiel werden die Bildobjekte nicht unsichtbar schon im HTML-Skript vorgehalten, sondern erst beim Aufruf der Funktion überhaupt erzeugt!

nö, da werden nur die Namen von den Kleinbildern extrahiert, um das Grossbild selbigen Namens mit passendem relativen Pfad zu versehen.

Du brauchst doch den Bildnamen, gelle? Bei Dir heißt das "n"?

es ginge doch auch

element.onclick=function() {
Paramenter="ein_wert_vielleicht.jpg";
meine_Funktion();
}
meine_Funktion = function () {
 ... machswas mit Parameter;
}

In dem Beispiel heißen thumbs und Großbilder gleich, nur dass die thumbs in "thumbs/bildname.jpg" liegen und die grossbilder in "gross/bildname.jpg".

Gruß,

frankx

[Kai345]

Grütze .. äh ... Grüße!

gibts vielleicht nicht nicht, sondern eher: img[i].setAttribute("src","mein.jpg");

Das ist weniger schön. Auf setAttribute sollte verzichtet werden:

(selfhtml: node -> setattribute)

Cü
Kai

[Struppi]

Der Grund ist einfach der, dass die Vorschaubilder nicht mitskaliert werden - und hier fängt es an, merkwürdig zu werden: da außer Netscape 6.x kein Browser die nachträgliche Änderung von img.height bzw. .weight erlaubt,

Wie kommst du darauf, das stimmt nicht ausser Netscape 4 fällt mir kein Browser ein der Bilder nicht nachträglich skalieren kann

Struppi.