krassy: ein Bild mehrmals gleichzeitig anzeigen

Wie kann man ein Bild mehrmals anzeigen lassen?
Habe es so versucht:

for(var i=0; i<4; i++) {
  pic[i] = eval(document.getElementById("bild"));
  pic[i].style.position = "absolute";
  pic[i].style.top = i*20;
  pic[i].style.left = i*30;
}
.
.
.
<div id=bild><img src=bild.gif width=7 height=36 border=0 alt="bild"></div>

Funktioniert aber nicht. Nach jedem Schleifendurchlauf wird das alte Objekt gelöscht!

  1. echo $begrüßung;

    Wie kann man ein Bild mehrmals anzeigen lassen?

    Erzeuge Kopien, die du dann unterschiedlich behandeln kannst.

    for(var i=0; i<4; i++) {
      pic[i] = eval(document.getElementById("bild"));

    Das eval() ist hier überflüssig. document.getElementById() gibt nur einen Verweis auf ein einzelnes Element zurück. Auch das eval() ändert daran nichts.

    Funktioniert aber nicht. Nach jedem Schleifendurchlauf wird das alte Objekt gelöscht!

    Nein, es wird nicht gelöscht. Du greifst nur immer wieder auf das gleiche Element zu und setzt einige Eigenschaften anders.

    echo "$verabschiedung $name";

    1. Danke erstmal, für den Tip:

      var pic = new Array();

      function a() {
        for(var i=0; i<4; i++) {
        pic[i] = document.getElementById("bild").cloneNode(true);
        pic[i].style.position = "absolute";
        pic[i].style.height = 20;  pic[i].style.width = 20;
        pic[i].style.top = i*20;  pic[i].style.left = i*30;
        document.getElementById("bild").firstChild.nodeValue += pic[i].firstChild.nodeValue;
        }
      }
      .
      .
      .
      <div id=bild>Hallo World! <img src=bild.gif width=20 height=20 border=0 alt="bild"></div>

      Diese getElement Methoden scheinen jedoch nur mit Text-Elementen zu funktionieren(auch nach, update auf IE6.0)!

      1. hi,

        Diese getElement Methoden scheinen jedoch nur mit Text-Elementen zu funktionieren

        Nein, das ist nicht zutreffend.

        document.getElementById("bild").firstChild.nodeValue += pic[i].firstChild.nodeValue;

        Das ist allerdings Unfug.
        nodeValue hat für andere Elemente als Textknoten immer den Wert null, und daran mit dem Stringverkettungsoperator etwas anhängen zu wollen, kann nicht funktionieren.
        Und bei einem Textknoten könntest du damit auch lediglich weiteren Textinhalt anfügen, aber kein HTML-Objekt.

        Wenn du ein neu erzeugtes Element irgendwo einhängen möchtest, nutze die Methoden appendChild oder insertBefore.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Guten Morgen!

          Habe es jetzt so gemacht:

          var pic = new Array();

          function a() {
            for(var i=1; i<4; i++) {
              pic[i] = document.createElement("img");
              pic[i].src="_ichkreis2.gif";
              pic[i].style.position = "absolute";
              pic[i].style.height = 20;  pic[i].style.width = 20;
              pic[i].style.top = i*20;  pic[i].style.left = i*30;
            document.getElementById("bild").appendChild(pic[i]);
            }
          }

          Ist mir egal, ob er es jedesmal vom Server laden muss.
          Hauptsache es funktioniert!

          Danke

  2. hi,

    Funktioniert aber nicht. Nach jedem Schleifendurchlauf wird das alte Objekt gelöscht!

    Das ist Unfug.

    Du hast dir einen Picasso gekauft, den du zuerst in die Küche gehängt hast.
    Gefiel dir dort nicht, also ins Schlafzimmer damit.
    Auch nicht doll - na dann hängen wir ihn halt auf's Klo.
    Hm, auch doof - also an die Wohnzimmerwand.

    Nimmst du wirklich an, du hättest jetzt auf einmal _vier_ (identische) Picassos ...?

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Hi,

      Du hast dir einen Picasso gekauft, den du zuerst in die Küche gehängt hast.
      Gefiel dir dort nicht, also ins Schlafzimmer damit.
      Auch nicht doll - na dann hängen wir ihn halt auf's Klo.
      Hm, auch doof - also an die Wohnzimmerwand.

      Also so wie ich das sehe, wird der doch immer am selben Nagel aufgehängt - immer an left:0; top:0; ;-)

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      Schreinerei Waechter
      O o ostern ...
      Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.