einfache Möglichkeit, Bilder als Minibildchen (thumbnails) in die Auktionsbeschreibung einzubinden, welche beim Anklicken vergrößert werden:
 |
Details -
anklicken vergrößert!
|
Dies ist eine einfache Tabelle, für die Du zu dem Originalbild noch ein kleines Vorschaubildchen (thumbnail) erzeugen musst. Die Bilder werden dann jeweils folgendermaßen in den Quelltext eingefügt:
<!-- Beginn Tabelle:
center=> zentriert, border=> legt Rahmendicke, Art und Farbe fest, margin=> Abstand der Tabelle zum Umfeld -->
<!-- linkes großes Bild:
tr=tabellenzeile, td=tabellenzelle, Bild (img src) Größe hier: 400x400px, das verlinkte (a href) große Bild: 559x510px, Innenabstand zum Rand (padding)=> 2em, alt=> alternativtext (falls Bild mal ausfällt) -->
<tr>
<td style="border:1px solid #004332; padding: 2em;"><a href="BILDADRESSE" width="559" height="510" alt="ALTERNATIVTEXT"><img src="BILDADRESSE" width="400" height="400" alt="ALTERNATIVTEXT" border="0"></td>
<!-- Ende linkes großes Bild -->
<!-- rechter text über den thumbnails -->
<td style="border:1px solid #004332; padding: 1.5em;"><span style="font: 0.7em verdana; color: #a00; padding: 10px;"><b>Details</b> -
anklicken vergrößert!</span>
<br>
<!-- Ende rechter text über den thumbnails -->
<!-- erste beide thumbnails:
eigene Bildadressen (URL) einsetzen! a href verlinkt zum=> großen Bild, img src hier=> zum mini-bild (hier 100x100px), Abstand der thumbnails je=> margin 5px -->
<a href="BILDADRESSE"><img src="THUMBNAIL-ADRESSE" alt="ALTERNATIVTEXT" style="width: 100px; height: 100px; border: 1px solid #404040; margin:5px;"></a>
<a href="BILDADRESSE"><img src="THUMBNAIL-ADRESSE" alt="ALTERNATIVTEXT" style="width: 100px; height: 100px; border: 1px solid #404040; margin: 5px;"></a>
<br>
<!-- Ende erste beide thumbnails -->
<!-- nächste beide thumbnails wie oben -->
<a href="BILDADRESSE"><img src="THUMBNAIL-ADRESSE" alt="ALTERNATIVTEXT" style="width: 100px; height: 100px; border: 1px solid #404040; margin:5px;"></a>
<a href="BILDADRESSE"><img src="THUMBNAIL-ADRESSE" alt="ALTERNATIVTEXT" style="width: 100px; height: 100px; border: 1px solid #404040; margin:5px;"></a>
<br>
<!-- Ende nächste beide thumbnails -->
<!-- letzte beide thumbnails wie oben -->
<a href="BILDADRESSE"><img src="THUMBNAIL-ADRESSE" alt="ALTERNATIVTEXT" style="width: 100px; height: 100px; border: 1px solid #404040; margin: 5px;"></a><a href="BILDADRESSE"><img src="THUMBNAIL-ADRESSE" alt="ALTERNATIVTEXT" style="width: 100px; height: 100px; border: 1px solid #404040; margin: 5px;"></a>
</td>
<!-- Ende letzte beide thumbnails -->
</tr></table><!-- ======================== Ende Tabelle ===================== -->
wenn Du diese Bildertabelle verwenden willst
- lade Deine Bilder und Vorschaubildchen auf Deinen webspace hoch
- kopiere oben alles zwischen den gelben Zeilen in einen editor, wo Du die Tabelle bearbeiten kannst,
(die <!-- farbigen Kommentare--> dienen nur Deiner Information. Sie erscheinen nicht auf der Seite, auch wenn Du sie mitkopierst) - passe sie Deinen Wünschen und Bildadressen an,
- speichere sie für spätere Wiederverwendung
- und kopiere sie dann in ebays Einstell-Formular (im html-Reiter) in Deine Artikelbeschreibung an die Stelle, wo die Bilder erscheinen sollen
- Du kannst natürlich beliebig viele Bilder auf diese Weise verwenden
Hier im Beispiel ist der Bildertabelle kein Hintergrund zugewiesen, sodass der Hintergrund der Seite transparent durchscheint.
Soll die Tabelle einen eigenen Hintergrund bekommen, muss das ganz oben bei der
<!-- Tabellendefinition --> noch hinzugefügt werden.
- z.B. eine schwarze Hintergrundfarbe:
<table align="center" style=" background: #000000; border:1px solid #a00; margin: 2em auto;"> (beispiel) - oder die Adresse (URL) eines Hintergrundbildes:
<table align="center" style=" background:url('Bildadresse'); border:1px solid #a00; margin: 2em auto;"> (beispiel)
