Bildhintergrund
    
WWW.WEB-TOOLBOX.NET
BEISPIEL DOWNLOAD ZURÜCK SITEMAP  

 Bildhintergrund Fotopräsenz

Beispiele bei der eine Miniansicht zum Vergrößern auf einem Filmhintergrund dargestellt wird. In der Kombination mit dem JavaSript "Window in Bildgröße" gut geeignet für ihre Homepage 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:




 Quelltext


... 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>






NACH OBEN