Scriptfreie Galerie bis 4 Bilder im Querformat (bis 500x375)

Vorschaubilder 120x90 - XXL ist möglich

Diese Galerie kann bei eBay von jedem benutzt werden und sie funktioniert auch wenn der Besucher javascript deaktiviert hat.


Bitte den Mauszeiger über die Vorschaubilder bewegen! Bei einem Hinweis auf ein XXL-Bild können Sie dieses aufrufen, indem Sie auf das entsprechende Vorschaubild klicken. Das Bild öffnet sich in einem neuen Fenster.

So geht es

  • die Bilder müssen in der richtigen Größe auf Webspace liegen
  • zusätzlich bitte dies Bild speichern und ebenfalls dort hochladen -->

  • der Quelltext besteht aus zwei Teilen - den ersten könnt ihr ebenfalls auf Webspace laden und dann darauf so verlinken
    <link rel="stylesheet" href="http://deineDomain/ordner/galerie4.css" type="text/css">
    praktisch vor allem wenn ihr Galerien (mit verschiedenen Bildern) in mehreren Angeboten einfügen wollt. Dieser Abschnitt ist für alle gleich - kann aber auch immer dabei bleiben)

  • im zweiten Abschnitt werden die Bildadressen eingetragen und die Rahmenfarbe für die jeweilige Galerie ausgewählt wenn sie verschieden sein sollen.

  • für weniger als vier Bilder: bei Vorschau- und Grossbildern einfach keine Adresse eintragen
    beim Abschnitt für XXL Bilder die nicht benötigte Zeile löschen.

  • ohne XXL Bilder geht es auch - die Variante dafür steht darunter

1.Teil des Quelltextes

Bitte die Adresse des ldg.gif eintragen. Farbige Werte können geändert werden - müssen aber nicht.

<style type="text/css">

/* ====== Externe Datei - Anfang ======= */
#bg { width:660px; height:410px;
    background:#ccc; border:2px outset #fff; text-align:left; }  /* Hintergrund und Rahmen der Galerie */
#bg * { position:absolute; } #vp { margin:8px; }
#vp * { text-decoration:none; }
#vp a, #vp u, #vp s {
    background:#fff no-repeat center; border:2px outset #fff; }  /* Rahmen Vorschaubilder */
#vp a { width:120px; height:90px; }
#vp a:hover, #vp u { border-style:groove; }                      /* Rahmen Vorschaubilder */
#vp u { width:505px; height:390px; margin:-2px;
    background-image:url('http://domain/ordner/ldg.gif'); }
#vp b, a#b00 div { width:100%; height:100%;
    background:no-repeat center; cursor:default; }
#vp b { display:block; } a#b00, a#b00 div, #vp u, #vp s {
    visibility:hidden; }
a#b00 u, a#b00:hover div, #vp a:hover u, #vp b, #vp a.xxl s {
    visibility:visible; }
a#b00, #vp a:hover { display:block; z-index:1; }
#vp s { padding:1px; right:-4px; bottom:-4px;
    font-size:8px; line-height:1em; color:#090;                   /* Schriftfarbe XXL */
    font-family:arial,sans-serif; cursor:pointer; }
.hint { width:660px; text-align:left; font-size:10px; color:#999; /* Schriftfarbe Hinweis */
    font-family:verdana,sans-serif; }
a#b01 { left:517px; top:  0px; } a#b01 u { left:-517px; top:   0px; }
a#b02 { left:517px; top:  99px; } a#b02 u { left:-517px; top:   -99px; }
a#b03 { left:517px; top:  198px; } a#b03 u { left:-517px; top:   -198px; }
a#b04 { left:517px; top:  297px; } a#b04 u { left:-517px; top:   -297px; }

/* Die folgenden Weichen sind nur für die ebay-Umgebung gedacht
   und sollten auf eigenen Seiten durch einen DocType-Switch in
   der ersten Zeile dieses Dokumentes ersetzt werden.  */

html:first-child>b\ody #bg { width:664px; height:414px; }
html:first-child>b\ody #vp a { width:124px; height:94px; }
html:first-child>b\ody #vp u { width:509px; height:394px; } /* Opera 7/8 */
* html b\ody #bg { width:664px; height:414px; }
* html b\ody #vp a { width:124px; height:94px; }
* html b\ody #vp u { width:509px; height:394px; } /* IE 5.5-7 */
/* ====== externe Datei - Ende ====== */

</style>

2.Teil des Quelltextes 


<link rel="stylesheet" href="http://deineDomain/ordner/galerie4.css" type="text/css">  /* bei externer css Datei */

<style type="text/css">     /* kann an den Anfang in ein vorhandenes stylesheet */

/*==== Rahmenfarbe, -textur (sonst grau) ====*/
#bg { background:#ffffff url('http://domain/ordner/hintergrundbild wenn gewünscht'); }


/*==== Bildhintergrundfarbe (sonst weiß) ====*/
#vp a, #vp u, #vp i { background-color: #F5F5F5; }

/*==== Vorschaubilder bis max.  120 x  90 ====*/
a#b01 { background-image:url('http://domain/ordner/bildklein1.jpg'); }
a#b02 { background-image:url('http://domain/ordner/bildklein2.jpg'); }
a#b03 { background-image:url('http://domain/ordner/bildklein3.jpg'); }
a#b04 { background-image:url('http://domain/ordner/bildklein4.jpg'); }

/*====   Großbilder bis max. 500 x 375   ====*/
b#c00,
a#b01:hover b, b#c01 { background-image:url('http://domain/ordner/bildgross1.jpg'); }
a#b02:hover b, b#c02 { background-image:url('http://domain/ordner/bildgross2.jpg'); }
a#b03:hover b, b#c03 { background-image:url('http://domain/ordner/bildgross3.jpg'); }
a#b04:hover b, b#c04 { background-image:url('http://domain/ordner/bildgross4.jpg'); }

/*==== Vorgewähltes Bild (sonst erstes) ====*/
b#c00 { background-image:url('http://domain/ordner/bildgross.jpg'); }

</style>

<!-- ============== da einfügen wo die Galerie hin soll ================ -->
<!-- ================= Bildergalerie Start - freeware by epaw ========== -->

<div align="center"><div id="bg"><div id="vp">
<a id="b00" href="#"><u><b id="c00"><div></div></b></u></a>

<a id="b01" href="http://domain/ordner/bildxxl1.jpg" target="_blank" class="xxl"><u><b></b></u><s>XXL</s></a>

<a id="b02" href="http://domain/ordner/bildxxl2.jpg" target="_blank" class="xxl"><u><b></b></u><s>XXL</s></a>

<!-- Bild 3 - löschen wenn nur zwei Bilder gewünscht -->
<a id="b03" href="http://domain/ordner/bildxxl3.jpg" target="_blank" class="xxl"><u><b></b></u><s>XXL</s></a>

<!-- Bild 4 - löschen wenn nur drei Bilder gewünscht -->
<a id="b04" href="http://domain/ordner/bildxxl4.jpg" target="_blank" class="xxl"><u><b></b></u><s>XXL</s></a>
<!-- bis hier -->

</div></div><div class="hint"><br>
Bitte den Mauszeiger über die Vorschaubilder bewegen! Bei einem Hinweis auf ein
XXL-Bild können Sie dieses aufrufen, indem Sie auf das entsprechende Vorschaubild
klicken. Das Bild öffnet sich in einem neuen Fenster.</div></div>
<!-- ================ Bildergalerie Ende =============================== -->

Ohne XXL Bilder muss der letzte Abschnitt so aussehen

Könnt ihr natürlich auch mischen - dafür die entsprechenden Zeilen austauschen.

<!-- ============== da einfügen wo die Galerie hin soll ================ -->
<!-- ================= Bildergalerie Start - freeware by epaw ========== -->

<div align="center"><div id="bg"><div id="vp">
<a id="b00" href="#"><u><b id="c00"><div></div></b></u></a>

<a id="b01" href="#"><u><b></b></u></a>

<a id="b02" href="#"><u><b></b></u></a>

<!-- Bild 3 - löschen wenn nur zwei Bilder gewünscht -->
<a id="b03" href="#"><u><b></b></u></a>

<!-- Bild 4 - löschen wenn nur drei Bilder gewünscht -->
<a id="b04" href="#"><u><b></b></u></a>
<!-- bis hier -->

</div></div><div class="hint"><br>
Bitte den Mauszeiger über die Vorschaubilder bewegen! </div></div>
<!-- ================ Bildergalerie Ende =============================== -->

Rot markiert sind Kommentare, die nicht angezeigt werden - ihr könnt sie auch aus dem Quelltext entfernen (einschließlich der /* */ bzw. der <!-- -->)
Vorsicht mit " " | ' ' | ; | bei Veränderungen.

Statistik heute: 13  | online: 3

nach oben