 Hintergrundgrafik Vorschaubilder 02 (Fotopräsenz + Linkliste)
Ein weiteres, praxisorientiertes Beispiel das auf 'Vorschau Hintergrundgrafik 01' aufbaut. Ebenfalls geeignet für eine Bildergallerie oder Fotovorschau. Die Hintergrundgrafik soll nun kleiner werden und Platz einsparen.
|
|
» Monitor-Hintergrundgrafik für eine Bildvorschau - Version 02 «
Die in den Tabellenzellen zentrierten Grafiken wird vor einem Hintergrund dargestellt. Eine nette Verpackung für Vorschaubilder, für Bildtausch-Scripts, Linklisten oder Verweisseiten mit grafischen Verweisflächen.  BEISPIEL
Weiterentwicklung aus Version 01
|
Die im Beispiel-01 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 im Beispiel-01 noch 200 x 200 Pixel große Grafik habe ich erst einmal horizontal zugeschnitten. Das Abschneiden der unnötigen Randbereiche rechts und links bringt eine Platzeinsparung von 30 Pixel in der Horizontalen.
|
|
Im nächsten Arbeitsgang wurde die Hintergrundgrafik dann noch in der Höhe auf die unbedingt notwendige Mindestgröße zugeschitten. Dazu habe ich den Monitorfuß verkleinert. Deshalb kann auch der obere Freiraum verkleinert werden. Das bringt eine Platzeinsparung 44 Pixel in der Vertikalen.
Die Kantenlänge der Grafik ist nun 170 bzw. 156 Pixel.
|
|
Statt einer Größe von 200 x 200 Pixel hat die Hintergrundgrafik nun nur noch die Abmessungen 170 x 156 Pixel.
Für eine Bildergallerie mit mehreren Vorschaugrafiken bietet das nun den Vorteil, auf gleichem Raum mehr Grafiken (mit Hintergrundgrafik) anzeigen zu können.
|
Einsatzbeispiel
Einer Bildvorschau mit platzsparenden Grafik-Versionen. Vorschaubilder in Kombination mit meinem Script  PopUp in Bildgröße
Vorschau anklicken für eine Großansicht.
Meine Überlegungen für dieses Beispiel:
Vorschaubilder werden vor einem ansprechenden Hintergrund dargestellt. Dieses Beispiel und die verwendeten Grafiken eignen sich für die Darstellung von Minibildern im Seitenverhältnis 4 : 3 mit den Abmessungen 150 x 113 Pixel.
Die Tabellenzellen sind so groß wie die Hintergrundgrafik 170 x 156 Pixel. Die Größe wird entweder über CSS-Anweisungen oder als Attribut der <td>-Tags festgelegt.
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 (zentriert) vor dem 'Monitor' positioniert wird.
Zuweisung der Hintergrundgrafik
1 Die Hintergrundgrafik kann man mit HTML-Anweisungen festlegen:
<td background="monitor-170.gif" width="170" height="56"...
Die Ausrichting der Tabellenzelleinhalte muss ebenfalls festgelegt werden:
<td background="monitor-170.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-170.gif) #FFFFFF;
width:170px;
height:156px
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" width="170" height="156" valign="middle" align="center"
Wenn es Probleme gibt
Falls sie mit der Darstellung der Mini-Grafiken nicht zufrieden sind weil kleine Farbstreifen des violetten Hintergrundes zu sehen sind:
a 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>
b Kontollieren sie die Breitenangaben für die Tabelle.
<table width="xxx"...
Für xxx soll die Summe der Tabellezellenbreiten eingetragen sein!
Einfacher: keine Breitenangabe für das <table>-Tag
Grafiken
Grafiken 170 x 156 Pixel - für Grafiken / Fotos von 150 x 113 Pixel
|
Grafik 170 x 156 Pixel zum Download
monitor-170x156-01.gif
|
|
Grafik 170 x 156 Pixel zum Download
monitor-170x156-02.gif
|
|
HOME
CSS-Notierung 
ZURÜCK 
)
)
)
