 Hintergrundgrafik Vorschaubilder 01 (Fotopräsenz + Linkliste)
Nur ein kleines Praxisbeispiel, das sie für eine Bildergallerie oder Fotovorschau einsetzen können. Ich nutze es für die Vorschau meiner Homepage-Vorlagen und plane einen Verwendung auch für die Übersicht meiner Adventskalender.
|
|
» Monitor-Hintergrundgrafik für eine Bildvorschau - Version 01 «
Eine in einer Tabellenzelle zentrierte Grafik wird vor einem Hintergrund dargestellt.
Es ist eigentlich nichts weiter als eine nette Verpackung von Vorschaubildern für Bildtausch-Scripts, Linklisten oder Verweisseiten mit grafischen Verweisflächen.  BEISPIEL
 |
|
 |
| Grafik als Verweis |
|
Link auf Fotoseite |
Meine Überlegungen für dieses Beispiel:
Ich möchte Vorschaubilder vor einem ansprechenden Hintergrund darstellen und nicht jedesmal ein Grafik-Programm nutzen, die Minibilder in eine Hintergrundgrafik einzukopieren. Mit CSS-Anweisungen soll der Hintergrund festgelgt und die Minigrafik davor zentriert positioniert werden. Dazu musste ich natürlich entsprechende Grafiken herstellen, aber eben nur ein einziges Mal.
Dieses Beispiel und die verwendeten Grafiken eignen sich für die Darstellung von Minibildern im Seitenverhältnis 4 : 3 mit den Abmessungen 150 : 113 Pixel
Meine Tabellenzellen sind so groß wie die Hintergrundgrafik 200 x 200 Pixel. Die Größe wird entweder über CSS-Anweisungen oder als Attribut der <td>-Tags festgelegt.
(in alten Browserversionen zB. NS4 musste man das früher anders realisieren Infoseite)
Ich habe die Hintergrundgrafik so entworfen, das genau im Zentrum ein Leerbereich von 150 x 113 Pixel entsteht, weil ich Grafiken mit genau diesen Abmessungen anzeigen möchte. Die Mini-Grafik im Vordergrund wird in der Tabellenzelle horizontal und vertikal zentriert.
| |
|
|
| Abmessungen 200 x 200 |
|
Hintergrundgrafik |
| |
|
 |
| Hintergrundgrafik transparent |
|
Vordergrund-Grafik |
 |
|
|
| mit Vordergrund-Grafik |
|
mit Vordergrund-Grafik |
Die Hintergrundgrafik wurde so entworfen, das durch die Attribute im <td>-Tag valign="middle" und align="center" das dargestellte Vorschaubild von 150 x 113 Pixel in die richtige Position vor dem 'Monitor' rückt.
Zuweisung der Hintergrundgrafik
1 Die Hintergrundgrafik kann man mit HTML-Anweisungen festlegen:
<td background="monitor-200x200.gif" width="200" height="200"...
Die Ausrichting der Tabellenzelleinhalte muss ebenfalls festgelegt werden:
<td background="monitor-200x200.gif" valign="middle" align="center"...
2 Die Hintergrundgrafik kann man mit CSS-Anweisungen festlegen:
<td class="monitor" ...
Zugehörig muss im CSS-Block (im Head oder als externe Datei) die CSS-Klasse 'monitor' definiert werden.
<style type="text/css">
<!--
.monitor {
background:url(monitor-200x200.gif) #FFFFFF;
width:200px;
height:200px
text-align:center;
vertical-align:middle;
}
-->
</style>
3 Für exotische Browser:
Wenn sie nicht sicher sind ob evtl exotische Browser die CSS-Anweisungen für Breite, Höhe und Ausrichtung richtig interpretieren, können sie neben den Notierungen im CSS-Block sicherheitshalber in das <td>-Tag entsprechende zusätzliche Angaben eintragen:
<td class="monitor" height="200" valign="middle" align="center" width="200"
Wenn es Probleme gibt
Falls sie mit der Darstellung der Mini-Grafiken nicht zufrieden sind weil kleine Farbstreifen des violetten Hintergrundes zu sehen sind, kontollieren sie die Notierung ihrer HTML-Tags.
Diese Notierung kann abhängig vom Browser Abweichungen in der Darstellung hervorrufen.
(Sichwort: Pseudo-Leerzeichen)
<td class="monitor" valign="middle" align="center" width="200">
<img src="grafik.jpg" width="150" height="113" border="0" alt="">
</td>
Notieren sie dann die HTML-Tags unmittelbar hintereinander, ohne Zeilenumbruch und Leerzeichen. Besonders dann, wenn sie zusätzlich Link-Tags (<a>) für einen Verweis eintragen, könnte das wichtig sein!
<td class="monitor" ... ><a ... ><img src="grafik.jpg" ... ></a></td>
Anregung zu Alternativen
| |
|
 |
| Diarahmen leer |
|
mit Grafik |
| |
|
|
| Film leer |
|
mit Grafik |
Zu der Darstellung mit Filmstreifen werde ich eine bessere Technik beschreiben, damit der Filmstreifen waagerecht ununterbrochen durchläuft und sie einen 'echten' Filmstreifen darstellen können. Außerdem wird dann die Anzahl der darstellbaren Vorschaubilder größer und der Raum besser genutzt. Demnächst ...
 Grafiken 200 x 200 Pixel - für Bilder von 150 x 113 Pixel - Download:
|
Grafik 200 x 200 Pixel zum Download
monitor-200-150x113.gif
|
|
Grafik 200 x 200 Pixel zum Download
film-200-150x113.gif
|
|
Grafik 200 x 200 Pixel zum Download
dia-200-150x113.gif
|
|
Grafik 200 x 200 Pixel zum Download
dia-200-150x113-klicken01.gif
|
|
Grafik 200 x 200 Pixel zum Download
dia-200-150x113-klicken02.gif
|
Schauen sie demnächst noch einmal vorbei, möglicherweise finden sie dann weitere Hintergrundgrafiken z.B. auch einen vernünftigen LCD-Bildschirm.
Vergessen sie aber nicht, diese Seite dann vom Server abzurufen und lassen sie sich nicht durch die Darstellung der alten Seite vom 29.08.2008 aus dem Browsercach täuschen.
Beispiele mit platzsparenden Versionen sind fertig / weitere in Arbeit
|
Die oben verwendeten Hintergrundgrafiken sind weit größer als notwendig. Das ist OK wenn sie eine einzelne Grafik verwenden oder bei Mehrfachverwendung ein Abstand erwünscht ist.
Die Hintergrundgrafik links wurde bereits in der Breite verkleinert.
 Vorschau Hintergrundgrafik 02
|
|
HOME
BEISPIEL 
CSS-Notierung )
)
)
