Jeder kann Urlaubsfotos auf seiner Website veröffentlichen, aber nur die coolsten Webentwickler gestalten sie als Diashow. Und es handelt sich nicht um eine einfache Diashow mit einem Foto und einer HTML-Seite, sondern um eine wirklich dynamische Diashow, bei der jedes Bild auf dieselbe HTML-Seite heruntergeladen wird. Wir zeigen Ihnen, wie Sie dynamisches HTML (DHTML) und Cascading Style Sheets (CSS) verwenden, um Ihre eigene persönliche Diashow zu erstellen, die Ihre Freunde, Familie und Kollegen langweiliger macht, oh nein! Es ist beeindruckender. Aber denken Sie daran! Da diese Diashow in DHTML geschrieben ist, kann sie nur in Browserversionen 4.0 oder höher angezeigt werden.
Natürlich hat diese Art von Diashow einen ernsthaften Nutzen. Es ist nur so, dass wir noch nicht daran gedacht haben.
Schritt eins
Sammeln Sie die Bilder, die Sie bereits im Internet haben, und schneiden Sie sie auf die gleiche Größe zu. Stellen Sie sicher, dass der Größenbereich nicht größer als 640 x 480 Pixel ist, und halten Sie die Pixelabmessungen bei allen Fotos gleich – es wird für den Betrachter optisch störend sein, wenn die Fotos unterschiedliche Größen haben.
Schritt 2
In Ihrem Header-Tag müssen Sie zunächst im
Schritt 3
Befassen Sie sich als Nächstes sofort mit den Details von CSS oder fügen Sie JavaScript in den Header-Tag ein. Legen Sie nach var numSLides = die Anzahl der anzuzeigenden Folien fest (stellen Sie nicht zu viele ein, da jedes Foto der Seite eine beträchtliche Menge an KB hinzufügt). In unserem Beispiel gibt es fünf Fotos. Das Folgende ist der Programmcode:
enden:
Funktion setUp() {
if (!document.all) {
document.all = Dokument;
for (i=1;i<=numSlides;i++) document.all[("image"+i)].
style=document.all[("image"+i)];
}
switchSlide(1);
}
Funktion switchSlide(sDir) {
newSlide = currentSlide + sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide > numSlides) newSlide=1;
document.all[("image"+newSlide)].style.visibility="visible";
document.all[("image"+currentSlide)].
style.visibility="hidden";
// Wenn Sie keinen Beschreibungstext wünschen, entfernen Sie die nächste Zeile:
document.all["captions"].document.forCaptions.captionsText.
value=captionTxt[newSlide];
currentSlide = newSlide;
}
//-->
Achten Sie auf die Kommentare am Ende des Programmcodes: Wenn Sie keine Beschreibung haben, entfernen Sie die Zeile darunter.
Schritt 6
Schließen Sie den Header-Tag mit und fügen Sie dann den folgenden Programmcode in den Textteil der HTML-Datei der Webseite ein. Beachten Sie, dass der Programmcode jedes Bild mit einem separaten
Schritt 7
Ihr Publikum muss in seinem eigenen Tempo durch die Folien klicken, also müssen Sie ihm etwas zum Klicken bieten. . Sie können einfache alte Hyperlinks verwenden, aber es ist viel ausgefeilter mit speziellen Schaltflächen zum Zurück- und Nächsten-GIF-Klicken. Der Beispielprogrammcode verwendet eine Tabelle, um next.gif und previous.gif zu verbinden:
Wenn Sie keine GIF-Dateien für die Schaltflächen „Zurück“ und „Weiter“ verwenden möchten, ersetzen Sie die -Tags oben durch Text.
Schritt 8
Geben Sie abschließend in