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 <STYLE>-Tag angeben, dass Sie CSS verwenden. Legen Sie im <STYLE>-Tag die Position auf der Seite fest, an der die Folie angezeigt werden soll, und entscheiden Sie, ob Sie mit einem leeren Hintergrundbild beginnen oder die erste Folie direkt anzeigen möchten. Bitte schneiden Sie den folgenden Programmcode aus und fügen Sie ihn unter Verwendung der Standortkoordinaten Ihrer Wahl in Ihre Seite ein:
<STYLE type="text/css"> <!-- .slides {position:absolute; view:hidden} --> </STYLE>
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:
<SCRIPT language="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;
Schritt 4
Wenn Sie dem Bild einen Erklärungstext hinzufügen möchten, können Sie mit dem folgenden Programmcode unseren Beschreibungstext durch Ihren eigenen Beschreibungstext ersetzen:
var captionTxt = new Array(numSlides);
function setUpCaptions() {
captionTxt[1] = „Eingang zum Pier 39.“
captionTxt[2] = „Seelöwen streifen in der Nähe des Piers umher.“
captionTxt[3] = „Das Boot hat am Pier angelegt.“
captionTxt[4] = „Wal-Wandbild der Unterwasserwelt.“
captionTxt[5] = „Inseln oder Felsen im Meer.“
}
Schritt 5
Fügen Sie den hier gezeigten Programmcode in die HTML-Datei Ihrer Webseite unter der JavaScript-Beschreibung ein. Da Navigator 4.0 und IE 4.0 CSS unterschiedlich interpretieren, verwendet unser Skript die Objekterkennung, um den Rendering-Modus zu bestimmen. Wenn der angezeigte Modus Navigator ist, können dennoch einige spezifische Objekte definiert werden, sodass der IE-Programmcode weiterhin funktioniert. Darüber hinaus ist dies auch das Ende des gesamten Programmcodes und muss daher mit dem Tag </SCRIPT> 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;
}
//-->
</script>
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 </HEAD> 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 <DIV>-Tag identifiziert, das dem regulären <IMG src>-Format zugeordnet ist:
<BODY onLoad="setUp()">
<B>Builder.com-Diashow!</B>
<DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV>
<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>
<DIV id="image3" class="slides"><IMG src="third.jpg"></DIV>
<DIV id="image2" class="slides"><IMG src="second.jpg"></DIV>
<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>
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:
<DIV style="position:absolute; top:350px; left:100px">
<A href="javascript:switchSlide(-1)"><IMG src=" previous.gif" border=0></A>
<A href="javascript:switchSlide(1)"><IMG src="next.gif" border=0></A>
</DIV>
Wenn Sie keine GIF-Dateien für die Schaltflächen „Zurück“ und „Weiter“ verwenden möchten, ersetzen Sie die <IMG>-Tags oben durch Text.
Schritt 8
Geben Sie abschließend in <TEXTAREA> den anzuzeigenden Beschreibungstext ein. Sie können die Größe von <TEXTAREA> nach Belieben bestimmen, ändern Sie einfach die Zahlen rows= und cols=. Das Folgende ist der Programmcode:
<DIV id="captions" style="position:absolute; left: 320px; top:75px">
<B>Bildunterschrift</B>
<FORM-Name=forCaptions>
<TEXTAREA name="captionsText" wrap="virtual" rows=25 cols=20"></TEXTAREA>
</FORM>
</DIV>