 Hintergrundgrafik Fotopräsenz (alte Browser)
Untertitel: Hintergrundgrafik in Tabellenzellen - Zellengröße erzwingen
Der Inhalt dieser Seite 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. Eine themenverwandte Beispielseite für aktuelle Browser finden sie unter  Hintergrundgrafik für Vorschaubilder 01
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)
Image diapositiv-02.gif - 138 x 127 (nicht transparent)
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>
|
WWW.WEB-TOOLBOX.NET
BEISPIEL 
DOWNLOAD 
ZURÜCK 
