Tabellenzellen-Hintergrund
    
 Home • Bilder • Fotopräsenz 01 BEISPIEL  DOWNLOAD

 Hintergrundgrafik Fotopräsenz  (alte Browser)

Untertitel: Hintergrundgrafik in Tabellenzellen - Zellengröße erzwingen

Dieses praxisbezogene Anwendungsbeispiel ist älteren Datums und dient nur noch als Referenz. Hier erkläre ich die Technik, die Größe einer Tabellenzelle mit transparenten Grafiken zu erzwingen.

Ein Beispiel aus der Zeit, als die Browser Breitenangaben für Tabellenzellen nicht oder nicht einheitlich interpretierten.

Themenverwandte Beispiele zur Darstellung von Vorschaugrafiken für aktuelle Browser welche CSS interpretieren können, finden sie im Menü Bilder - Untermenü 6 - 'Vorschaubilder mit CSS'

a  In neuen Browsern

Meine Tabellenzellen sollen so groß wie die Hintergrundgrafik sein. Die Größe wird heute entweder über CSS-Anweisungen oder als Attribut der <td>-Tags festgelegt.

Die Hintergrundgrafik wurde so entworfen, das genau im Zentrum ein passender Leerbereich entsteht, um Grafiken mit genau diesen Abmessungen anzuzeigen. Die Vorschau-Grafik im Vordergrund wird in der Tabellenzelle horizontal und vertikal zentriert.

Hintergrundgrafik für Vorschaubilder 02


a  In alten Browsern

Attribute der <td>-Tags wurden nicht immer richtig interpretiert. Besonders dann, wenn die Gesamtbreite der Tabelle nicht mit der Summe der Breiten aller Tabellenzellen übereinstimmte (das kann auch heute noch eine Fehldarstellung hervorrufen).

Schlimmer wirkte sich aus, wenn die Inhalte der Tabellenzellen kleiner als die gewünschte Größe der Zellen (Maße der Hintergrundgrafik) war.


   Lösungsbeispiel

Als Lösungsbeispiel hier eine Bildvorschau, bei der eine Miniansicht zum Vergrößern auf einem Filmhintergrund dargestellt wird. In der Kombination mit dem JavaSript "PopUp-Window in Bildgröße" gut geeignet für eine Fotopräsentation.
  • Darstellung innerhalb einer Tabelle

  • Filmnegativ als Hintergrundbild

  • Erzwingung der Höhe und Breite durch transparentes Image in einer seperaten Tabellenzelle links und oberhalb des Darstellungsbereichs.


Beispiel 1 für Fotos 120 x 80 Pixel - Hintergrundbild 140 x 127 Pixel





Beispiel 2 für Fotos 100 x 75 Pixel - Hintergrundbild 117 x 122 Pixel






Image diapositiv-01.gif - 140 x 127 (transparent)

140 x 127

Image diapositiv-02.gif - 138 x 127 (nicht transparent)

140 x 127

Image diapositiv-03.gif - 117 x 122 (transparent)




   Erklärung

Das schwarze Filmnegativ wurde als Hintergrund einer Tabellenzelle eingebunden, das Foto als Tabellenzelleninhalt vertical und horizontal zentriert.

<td valign="middle" align="center" background="diapositiv-03.gif">

Die Tabellenzelle soll so groß wie das schwarze Negativ sein!

Um die Größe der Tabellenzelle eindeutig zu bestimmen (sonst würde das Negativ ja vom Foto verdeckt), habe ich links und oberhalb der Zelle ein transparentes Image passender Größe eingebunden.

Gleich hier sehen Sie zur Verdeutlichung die Tabelle mit eingeschalteten Rändern und zusätzlichen Abständen:





   Quellcode

... für Tabelle für 2 Vorschaubilder mit Hintergrund

'diapositiv-02.gif' 138 x 127 Pixel
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="2">
<img src="trans.gif" width="1" height="128" border="0" alt="">
</td>
<td>
<img src="trans.gif" width="138" height="1" border="0" alt="">
</td>
<td>
<img src="trans.gif" width="138" height="1" border="0" alt="">
</td>
</tr>
<tr>
<td valign="middle" align="center" background="diapositiv-02.gif">
<img src="foto01.jpg" width="120" height="80" border="1" alt=""><br>
</td>
<td valign="middle" align="center" background="diapositiv-02.gif">
<img src="foto01.jpg" width="120" height="80" border="1" alt=""><br>
</td>
</tr>
</table>