agi: Hintergrundsbild mit Tabelle erstellen

Ich würde gern eine Seite erstellen und zwar soll die Seite aus Tabellen bestehen.
Das Hintergrundsbild wurde also mir Photoshop klein geschnitten und dann die einzelnen Bilder in die Tabellee eingefügt(mit Dreamwever) damit das eigentliche Hintergrundsbild wieder entsteht.  Das war also meine Vorstellung von der Seite; nun ist das Bild was ich schneide ist 800x600 Auflösung und die Tabelle soll so gemacht werden, daß dabei einzelne Bereiche (Zelle mit geschnittenem Bild) "dehnbar" (dynamisch)sind. Das habe ich versucht indem ich in den dehnbaren bereichen, das Bild als Hintergrundsbild in der Zelle der Tabelle eingefügt habe. Nur leider klappt das nicht ganz so gut...also gar nicht weil  diese "gedehnten Hintergrundsbilder"
in den Zellen verstzt erscheinen und damit die Tabellen nicht mehr so zusammenpassen, daß sie das gesamte Bild wiedergeben. (was ja mein Ziel ist).
Meine Frage ist nun ob diese Möglichkeit mit HTML (Dreamweaver oder Frontpage) überhaupt funktioniert oder ob man dazu eine bestimmte Art der Programmierung braucht? Oder geht das einfach mit HTML? Wie heißt dieses Phänomän und wo finde ich etwas darüber?
Ich wäre sehr dankbar , wenn mir jemand helfen könnte, denn ich weiß leider nicht wonach ich suchen soll , solang ich den Begriff dafür nicht kenne. Ich glaube http://www.ibm.de hat eine ähnlich aufgebaute Seite, oder irre ich mich?
Vielen dank im voraus!

  1. Moin!

    Lange Frage, kurze Antwort: Ich habe vor ein paar Monaten auch mal nach 'ner Moeglichkeit gesucht, mit Hintergrundbildern variabler Breite, bzw. sich selbst anpassenden Bildern an sich zu arbeiten.

    Ich habe keine HTML 4-Loesung gefunden. Sobald man mit Bildern arbeitet, legt man sich automatisch auf eine optimale Breite fest. Es gab' mal ein paar Empfehlungen dazu, ich habe auch mal was gehoert, dass man um die 600 Pixel Breite herum bleiben solle.

    Ist aber eine absolut strittige Frage.

    Zur IBM-Page: Ich hab' sie jetzt nicht im Gedaechtnis, aber schau' doch einfach in den Quelltext.

  2. Hallo auch,

    nur ein paar grundsätzliche Überlegungen. Hab es selber nicht ausprobiert, aber so dürfte es eigentlich klappen, wenn auch nur auf dem IE. Du könntest jeder Tabellenzelle eine ander ID geben und dann mittels document.all.IDderTabellenZelle.offsetWidth die Breite herausbekommen (geht sicherlich auch ohne eigene ID für jede Zelle..). Um dann bei einer Änderung der Tabellenbreite die Bildbreite anzugleichen (dasselbe natürlich auch mit der Höhe) könntest du den resize-Handler window.resize durch deinen eigenen ersetzen.
    Der Handler könnte folgendermaßen aussehn.

    definition:
      Tabelle hat die class "bildertab"
      Die Zellen heissen fortlaufend notiert "Z1S1", "Z1S2" etc.
      Die Bilder in den Zellen heissen "Z1S1.img", "Z1S2.img" etc.

    var index = 0;
    while (document.all[index]) {
      if (document.all[index].className == "bildertab") {
        var zelle = document.all[index];
        // prueft ob es ein bild gibt
        if (document.all(document.all[index].id + '.img')) {
          var bild = document.all(document.all[index].id + '.img');
          bild.width = zelle.offsetWidth;
          bild.height = zelle.offsetHeight;
        }
      }
      index++;
    }

    Gruss, David

    PS: sicherlich gibt es noch elegantere Lösungen. Ich wollte nur einen Denkanstoss liefern.

  3. ich würde Dir zu macromedia fireworks raten !
    dort werden sogenannte slices (stückchen) eines Bildes erstellt, die in einer Tabelle zusammengefügt werden.
    also genau das was Du machen möchtest !

    cu rec

  4. Moin Agi,

    mir fällt da noch eine Konstruktion ein, die eigentlich funktionieren müsste:

    Du bastelst dir einen Layer, in dem die Tabelle mit den Bildern wie folgt steht:

    <TABLE WIDTH="100%">
    <TR>
    <TD><IMG SRC="http://www.teamone.de/selfhtml/xweb.gif" BORDER=0 WIDTH="100%"></TD>
    <TD><IMG SRC="http://www.teamone.de/selfhtml/xweb.gif" BORDER=0 WIDTH="100%"></TD>
    </TR>
    <TR>
    <TD><IMG SRC="http://www.teamone.de/selfhtml/xweb.gif" BORDER=0 WIDTH="100%"></TD>
    <TD><IMG SRC="http://www.teamone.de/selfhtml/xweb.gif" BORDER=0 WIDTH="100%"></TD>
    </TR>
    </TABLE>

    Bis hierhin habe ich es getestet, es werden in Abhängigkeit von der Bildschirmbreite die einzelnen Grafiken vergrößert oder verkleinert (siehe auch <../../sfarchiv/1999_1/t02116.htm>).

    Wenn du den eigentlichen Seiteninhalt dann in einem anderen Layer darüber positionierst (und somit die Tabelle zum Hintergrund machst), sollte es doch eigentlich funktionieren...

    Gruß
    Dirk