Bilder mit Script 10x wiederholen

[Manuel123]

Hallo!

Ich wollte fragen ob es möglich ist, mittels Script ein Bild 10x zu wiederholen ( mit unterschiedlichen absolute koordinaten ).

  
<p><span style="position: absolute; left: 450; top: 170"><img src="25.png"></span></p>  
<p><span style="position: absolute; left: 680; top: 170; z-index: 1"><img onclick="changeImage(3)" src="26.png"></span></p>  

Ich würde gerne diese 2 überlagerten Bilder 10x untereinander haben.

Aber aufgrund dessen, dass es auf einen kleinen Webserver läuft, sollte die html Seite so klein wie möglich sein, deshalb die Frage ob es mit Script + Schleife machbar ist?

Danke!

Lg
Manuel

[guest.ern]

Lieber Manuel,

da du uns nicht sagst, was du eigentlich erreichen möchtest, kann man zu deiner Frage

Ich wollte fragen ob es möglich ist, mittels Script ein Bild 10x zu wiederholen ( mit unterschiedlichen absolute koordinaten ).

nur antworten: vermutlich ja.

Aber aufgrund dessen, dass es auf einen kleinen Webserver läuft, sollte die html Seite so klein wie möglich sein, deshalb die Frage ob es mit Script + Schleife machbar ist?

Die Größe "hat schon immer selten" eine Rolle gespielt. Was heißt "kleiner Webserver"? Was heißt "Seite so klein wie möglich"? Was heißt "Script"? Hat das etwas miteinander zu tun?

Ohne weitere Informationen kann man vermutlich nur wie Robert antworten:

Liebe Mitdenker,
liebe Wissende,
liebe Neugierige,

ja!

Wobei Robert das wohl in "vermutlich ja!" ändern sollte.

Beschreibe also bitte, was du erreichen möchtest, was dein Ziel ist, dann kann man dir hier sicher helfen.

[Gunnar Bittersmann]

@@Manuel123:

nuqneH

Ich würde gerne diese 2 überlagerten Bilder 10x untereinander haben.

Aber aufgrund dessen, dass es auf einen kleinen Webserver läuft, sollte die html Seite so klein wie möglich sein, deshalb die Frage ob es mit Script + Schleife machbar ist?

Die paar Zeichen HTML-Code, die du vielleicht einsparst, wären selbst dem kleinsten Webserver völlig egal. Das wäre kein sinnvoller Grund, die Wiederholung mit Script + Schleife zu machen. Zumal der Code für das Script ja auch einige Zeichen beansprucht.

Es mag andere Gründe geben, das mit Script zu machen: z.B. Wartbarkeit des Codes.

Dann wäre erstmal die Frage zu klären: Soll das Script auf dem Server laufen (PHP, …) oder auf dem Client (JavaScript)?

Welche Gründe gibt es, die Bilder absolut zu positionieren? Ich schätze, auch keine sinnvollen.

Qapla'

[Manuel123]

@@Manuel123:

nuqneH

Ich würde gerne diese 2 überlagerten Bilder 10x untereinander haben.

Aber aufgrund dessen, dass es auf einen kleinen Webserver läuft, sollte die html Seite so klein wie möglich sein, deshalb die Frage ob es mit Script + Schleife machbar ist?

Die paar Zeichen HTML-Code, die du vielleicht einsparst, wären selbst dem kleinsten Webserver völlig egal. Das wäre kein sinnvoller Grund, die Wiederholung mit Script + Schleife zu machen. Zumal der Code für das Script ja auch einige Zeichen beansprucht.

Es mag andere Gründe geben, das mit Script zu machen: z.B. Wartbarkeit des Codes.

Dann wäre erstmal die Frage zu klären: Soll das Script auf dem Server laufen (PHP, …) oder auf dem Client (JavaScript)?

Welche Gründe gibt es, die Bilder absolut zu positionieren? Ich schätze, auch keine sinnvollen.

Qapla'

Hallo,

Naja, ich würde ca. 3kByte an Platz einsparen, das ganze läuft auf einem ESP8266 ( Wlan - Uart Bridge ) und einem AtMega8 der via UART alle Daten an den ESP8266 und damit an den Client schicken muss. Deshalb ist es besser, wenn weniger Daten rübergeschickt werden müssen.

Das ganze sollte am Client laufen, also in Javascript.

Welche Gründe es gibt die Bilder absolutzu positionieren?
Ich habe aktuell eine Tabelle aufgebaut, und alle Bilder aneinandergereiht, das ganze braucht ca. 4kByte, mit der absoluten Positionierung ( damit die Überlagerung 2er Bilder funktioniert ) würde ich mithilfe der Schleife, eben diese 3kByte ca. sparen ( 1kByte wird vmtl. ca. Code + Script benötigen ).

Im Grunde soll es so aussehen wie im Bild (ich weiß, nicht perfekt gezeichnet ;)):
( später nur nicht mit einfachen Strichen, sondern mit etwas "schönerem" Design ). Und das ganze besteht aus Einzelbildern, die ich auch ändern können muss.

Ich hoffe man versteht es, ansonsten bitte nochmal nachfragen.

Danke für eure Hilfe

[Manuel123]

Hat jemand eine Idee?

[JürgenB]

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

[Gunnar Bittersmann]

@@Manuel123:

nuqneH

@@Manuel123:

nuqneH
[…]
Qapla'

Vorweg: zitiere bitte sinnvoll, nicht alles.

Das ganze sollte am Client laufen, also in Javascript.

Du könntest die Daten in ein JSON-Objekt packen und
dann per Script das DOM mit den entsprechenden Werten generieren. Aber …

Welche Gründe es gibt die Bilder absolutzu positionieren?
Ich habe aktuell eine Tabelle aufgebaut, und alle Bilder aneinandergereiht, das ganze braucht ca. 4kByte, mit der absoluten Positionierung ( damit die Überlagerung 2er Bilder funktioniert ) würde ich mithilfe der Schleife, eben diese 3kByte ca. sparen ( 1kByte wird vmtl. ca. Code + Script benötigen ).

Was für zwei Bilder? Lampe und Schalter?

Und das ganze besteht aus Einzelbildern, die ich auch ändern können muss.

Schalter an, Lampe an?

Das Ganze muss nur ein Bild sein – und zwar eine Vektorgrafik (SVG), keine Pixelgrafik (elches Grafikformat verwendest du gerade, PNG?).

Da SVG (wie HTML) ein DOM erzeugst, kannst du das Bild dynamisch ändern. Bspw. wiederverwendbare Gruppen für „an“ und „aus“ definieren und diese dynamisch austauschen.

Der Vorteil von SVG ist nicht nur, dass die Grafik in ihrer Größe skalierbar ist und dabei immer scharf bleibt, sondern das das Ganze mit deutlich weniger Dateigröße auskommt als dein bisheriger Ansatz.

Qapla'

[mark]

schließe mich gunnar und guest.ern an. evtl. brauchst du dafür auch gar kein script, sondern nur ``background-repeat: repeat-y;

[Matthias Apsel]

Om nah hoo pez nyeetz, mark!

schließe mich gunnar und guest.ern an. evtl. brauchst du dafür auch gar kein script, sondern nur ``background-repeat: repeat-y

Was allerdings allein zu Wiederholungen ubestimmter Anzahl führt. Background-size würde helfen.

Matthias