<div style="width: 510; overflow: auto;"><!-- // (C) 2008 Marvbec Zero // --><!-- // CSS-Formatierung der Tabellen, Grafiken und Buttons // --><style type="text/css">
<!--
table.Gallerietabelle {border:px solid #000000; width:550px; background-color:#transparent}
table.Gallerietabelle span,input {font-weight:bold; font-family:Trebuchet MS, Arial; font-size:14px; text-align:center}
td.Gallerienavigation {height:35px}
span.Galleriebutton {margin:0px; display:block; border:1px solid #000000; cursor:pointer; height:20px; width:200px}
form.Statusfeld {margin:0px}
input.Zaehlerfeld {text-align:center; height:24px; padding:0; width:100px; border:0}
.Zaehlerfeld{background-color:transparent;}
td.Hauptfeld {border:1px solid #000000}
div.Hauptbildchen {width:525px; overflow:auto; text-align:center}
div.Hauptbildchen img {border:1px solid #000000; max-width:500px}
td.Vorschaufeld {border:1px solid #000000; max-height:125px; height:expression(this.scrollHeight>125?125:auto)}
div.Vorschaubildchen {overflow:auto; max-height:125px; height:expression(this.scrollHeight>125?125:auto)}
div.Vorschaubildchen img {margin:2px; max-height:50px; height:expression(this.scrollHeight>50?50:auto); border:1px solid #000000; cursor:pointer}
--></style><script language="JavaScript"><!--
// (C) 2008 Marvbec Zero //
var Bildnummer=1; Moduswechsel=0
function Bildwechsel(Moduswechsel){
if (Moduswechsel==1){
Bildnummer--
if (Bildnummer<=0){Bildnummer=1}
Moduswechsel=0}
if (Moduswechsel==2){
Bildnummer++
// Die Position der 9 beschreibt die Gesamtanzahl(!) aller Bilder. Dies muss ggf. angepasst werden. //
if (Bildnummer>9){Bildnummer=Bildnummer-1}
Moduswechsel=0}
// Die Position der 9 beschreibt die Gesamtanzahl(!) aller Bilder. Dies muss ggf. angepasst werden. //
document.Statusanzeige.Zaehleranzeige.value=Bildnummer+"/9"
switch (Bildnummer){
// Beim Hinzufügen weiterer case-Befehle muss man die Ziffer um je 1 erhöhen! //
// Anstelle der Bild-URL sollten jeweils verschiedene gültige Bildadressen eingetragen werden. //
case 1:document.Galleriebild.src="http://img.webme.com/pic/v/veranstaltung-kind/marta.jpg";
document.getElementById("Bildbeschreibung").innerHTML = "
Bild 1";
break
case 2:document.Galleriebild.src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler6.jpg"
document.getElementById("Bildbeschreibung").innerHTML = "
Bild 2";
break
case 3:document.Galleriebild.src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler3.jpg"
document.getElementById("Bildbeschreibung").innerHTML = "
Bild 3";
break
case 4:document.Galleriebild.src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler4.jpg"
document.getElementById("Bildbeschreibung").innerHTML = "
Bild 4";
break
case 5:document.Galleriebild.src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler11.jpg"
document.getElementById("Bildbeschreibung").innerHTML = "
Bild 5";
break
case 6:document.Galleriebild.src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler12.jpg"
document.getElementById("Bildbeschreibung").innerHTML = "
Bild 6";
break
case 7:document.Galleriebild.src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler13.jpg"
document.getElementById("Bildbeschreibung").innerHTML = "
Bild 7";
break
case 8:document.Galleriebild.src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler8.jpg"
document.getElementById("Bildbeschreibung").innerHTML = "
Bild 8";
break
case 9:document.Galleriebild.src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler14.jpg"
document.getElementById("Bildbeschreibung").innerHTML = "
Bild 9";
break
// usw. //
// Der letzte case-Befehl sollte die Gesamtanzahl(!) aller Bilder sein. //
}}
--></script>
<table class="Gallerietabelle" cellspacing="5">
<tbody>
<tr>
<td class="Gallerienavigation">
<table width="100%">
<tbody>
<tr>
<td align="right"><span class="Galleriebutton" onclick="Bildwechsel(1)"><!-- // Dies ist der Text auf dem "Zurückbutton". Diesen kann man ggf. noch nach eigenen Wünschen anpassen. // -->Zurück </span></td>
<td width="100">
<form class="Statusfeld" name="Statusanzeige"><input type="hidden" name="PHPSESSID" value="8711dda86b5d85d8cc072f4ad349f960" />
<!-- // Die Position der 9 bei value beschreibt die Gesamtanzahl(!) aller Bilder. Dies muss ggf. angepasst werden. // --><input class="Zaehlerfeld" readonly="readonly" name="Zaehleranzeige" value="1/9" type="text" />
</form>
</td>
<td><span class="Galleriebutton" onclick="Bildwechsel(2)"><!-- // Dies ist der Text auf dem "Weiterbutton". Diesen kann man ggf. noch nach eigenen Wünschen anpassen. // -->Weiter </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="Vorschaufeld">
<div class="Vorschaubildchen" align="center"><span onclick="Bildwechsel()"><!-- // Dies ist die Vorschaubildliste. Beim Hinzufügen weiterer Grafiken muss man die Bildnummer um je 1 erhöhen! // --><!-- // Der Bildnummern müssen die selben Bild-URLs zugeordnet sein, wie in den case-Befehlen im JavaScript! // --><img onclick="Bildnummer=1" alt="" src="http://img.webme.com/pic/v/veranstaltung-kind/marta.jpg" /> <img onclick="Bildnummer=2" alt="" src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler6.jpg" /> <img onclick="Bildnummer=3" alt="" src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler3.jpg" /> <img onclick="Bildnummer=4" alt="" src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler4.jpg" /> <img onclick="Bildnummer=5" alt="" src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler11.jpg" /> <img onclick="Bildnummer=6" alt="" src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler12.jpg" /> <img onclick="Bildnummer=7" alt="" src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler13.jpg" /> <img onclick="Bildnummer=8" alt="" src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler8.jpg" /> <img onclick="Bildnummer=9" alt="" src="http://img.webme.com/pic/v/veranstaltung-kind/kuenstler14.jpg" /> </span></div>
</td>
</tr>
<tr>
<td class="Hauptfeld">
<div class="Hauptbildchen"><!-- // Hier muss die Bild-URL hinein, dessen Bild als erstes angezeigt werden soll. // --><img name="Galleriebild" alt="" src="http://img.webme.com/pic/v/veranstaltung-kind/marta.jpg" /><div id="Bildbeschreibung">
Beschreibung</div></div>
</td>
</tr>
</tbody>
</table>
