|
|
Servus,
Ich möchte eine Website basteln, auf der eine bildergalerie zu sehen ist. In der Mitte soll ein Bild groß und unten alle verfügbaren Bilder dieser Galerie klein zu sehen sein. Die kleinen sind gleichzeitg mit einem link versehen, dass sie auf Click groß angezeigt werden.
Das hab ich soweit auch hinbekommen, jetzt will ich aber diese Seite so verallgemeinern, dass man im quelltext nurnoch wenige veriablen ändern muss um solch eine Seite mit beliebig vielen Bildern, Dateinamen oder größen zu erstellen.
Eigentlich funktioniert es auch ganz gut. Ich verstehe nur nicht, warum das erste bild nicht groß angezeigt wird, und die Bilder unten in Reihe nicht angezeigt werden:
http://www.service-schnitzer.de/kjg/sfz-07-bilder-8-19.htm
Hier mein "allgemeiner" Code:
Code:
<html>
<head>
<title>bilder durchlauf</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script language="javascript">
<!--
bildmin = 0
bildmax = 13
bildname = "bahn"
bilddatei = ".JPG"
maxhoehe = 640
bildanzahl= bildmax - bildmin;
bilder = new Array(bildmax);
j=0;
for (var i = bildmin; i <bildmax; i++)
{
bilder[i] = new Image(); // Erzeuge ein Image-Objekt
bilder[i].src = bildname + i + bilddatei; // URL für das Objekt
}
function durchlauf(j)
{
document.bild.src = bilder[j].src;
}
function bilderladen(i)
{
bildindex = i + bildmin
document["bild" + i].src = bildname + bildindex + bilddatei;
document["bild" + i].width = document["bild" + i].width/4;
}
//-->
</script>
</head>
<body>
<table border="0" width="100%">
<tr>
<script language="javascript">
<!--
document.write('<td width="100%" height="' + maxhoehe + '">')
//-->
</script>
<p align="center">
<img src="javascript:durchlauf(j)" name="bild" align="center">
</td>
</tr>
<tr>
<td width="100%">
<p align="center">
<input type=button value="zurueck" onClick="if (j>=0) j--;if (j==-1) j=bildanzahl-1;durchlauf(j)">
<input type=button value="weiter" onClick="j = (j +1)%bildanzahl;durchlauf(j)"><br>
<p align="center">bei nicht funktionieren bitte:<br><input type=button value="Aktualisieren" onClick="javascript:self.location.reload()"></p>
</td>
</tr>
<tr>
<td width="100%" align="center">
<script language="javascript">
<!--
for (var i=0; i < bildanzahl; i++)
{
document.write('<a href="javascript:durchlauf(' + i + ')"><img name="bild' + i + '" src="javascript:bilderladen(' + i + ')"></a>');
}
//-->
</script>
</td>
</tr>
</table>
</body>
</html> |
|
|
| 03.09.2007 15:55:34 |
|
