JürgenB: Bilder mit Script 10x wiederholen

Beitrag lesen

Hallo Manuel123,

du musst zwei Probleme lösen:

  • die Anordnung der Bilder per html und css
  • die Erzeugung der Duplikate per Javascript

Zuerst das HTML:

<div id="x"><img src="b1.jpg"><img src="b2.jpg"></div>

Damit immer zwei Bilder nebeneinander liegen, bekommen im css die Bilder die halbe Breite des umschließenden Divs. Außerdem muss noch die Zeilenhöhe auf 0 gesetzt werden, damit die Bilder ohne Zwischenraum übereinander liegen:

  
  #x { width:600px; line-height:0 }  
  #x img { width:50% }  

Das Vervielfältigen der Bilder per Javascript geht über cloneNode, appendChild sowie die getElement...-Methoden (s. Doku):

  
  window.onload = function() {  
    var di = document.getElementById("x")  
    var im = di.getElementsByTagName("img");  
    var l = im.length;  
    for(var i=0;i<8;i++)  
      for(var j=0;j<l;j++)  
        di.appendChild(im[j].cloneNode(true));  
  }  

damit das Script erst läuft, wenn das Div und die Bilder vorhanden sind, wird es als onload-Eventhandler gestartet.

Ver

Gruß, Jürgen