Manchmal reicht ein einzelnes Bild einfach nicht aus, um alles zu präsentieren, was Sie auf Ihrer Website bewerben möchten. Wenn Sie sich jemals gefragt haben, wie einige Websites mehrere Bilder zum Drehen bringen, und Sie dies selbst tun möchten, fragen Sie sich nicht mehr. Ich bin hier, um Ihnen zu zeigen, wie es gemacht wird. Als zusätzlichen Vorteil zeige ich Ihnen, wie Sie Ihre Bilder an einem Ort aktualisieren und diese Updates global auf Ihrer Website anzeigen können.
Angenommen, Sie haben eine Kochseite und möchten, dass Bilder der fünf letzten Mahlzeiten, die Sie vorgestellt haben, im Banner gedreht werden. Oder nehmen wir an, Sie haben eine Immobilienseite und möchten, dass Bilder Ihrer 10 neuesten Angebote an einer bestimmten Stelle auf allen Ihren Seiten gedreht werden. Um Funktionalität hinzuzufügen, soll jedes Bild auf eine andere Seite verlinken. All dies ist mit dem folgenden Code kein Problem.
Zuerst müssen Sie sich organisieren. Sammeln Sie alle Ihre Bilder im selben Ordner und stellen Sie sicher, dass sie die gleiche Größe haben. Wenn sie nicht die gleiche Größe haben und Sie sie nicht verzerren möchten, ändern Sie einfach die Größe der Leinwand jedes Bildes und ändern Sie nicht die Größe des Bildes selbst. Auf diese Weise ändert der Platzhalter, in dem die Bilder angezeigt werden, seine Form nicht, wenn jedes neue Bild angezeigt wird.
Zweitens sammeln Sie alle Links, die Sie mit den Bildern verknüpfen möchten, und speichern Sie sie an einem geeigneten Ort, damit Sie sie später kopieren und einfügen können.
Drittens müssen Sie Folgendes in die Kopfzeile für jede Seite einfügen, auf der der Image Rotator angezeigt werden soll:
<script language="JavaScript1.2″>var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6// place your images, text, etc in the array elements here
var items = new Array();
items="<a href='link.htm' ><img alt='image0 (9K)' src=' /Images/image0.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image1 (9K)' src='/Images/image1.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image2 (9K)' src='/Images/image2.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image3 (9K)' src='/Images/image3.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image4 (9K)' src='/Images/image4.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image5 (18K)' src='/Images/image5.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
function rotater() {
document.getElementById("placeholder").innerHTML = items;
current = (current==items.length-1) ? 0 : current + 1;
setTimeout("rotater()",howOften*1000);
}function rotater() {
if(document.layers) {
document.placeholderlayer.document.write(items);
document.placeholderlayer.document.close();
}
if(ns6)document.getElementById("placeholderdiv").innerHTML=items
if(document.all)
placeholderdiv.innerHTML=items;current = (current==items.length-1) ? 0 : current + 1; //increment or reset
setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//–>
</script>
Auf den ersten Blick kann dieser Code einschüchternd wirken. Sie müssen jedoch nur den Pfad zu den Bilddateien aktualisieren und die URLs für die Links ausfüllen. Natürlich sollten Sie auch die Attribute height und width aktualisieren, um sie an Ihre Site anzupassen.
Wenn Sie nur vier Bilder drehen möchten, löschen Sie einfach eine der Elementzeilen. Wenn Sie eines hinzufügen möchten, kopieren und einfügen und aktualisieren Sie Elemente in Elemente usw.
Sie haben nun den Grundstein für das Hinzufügen dieses Bildrotators zu Ihrer Site gelegt. Es gibt jedoch noch einen weiteren Schritt, den Sie ausführen müssen, damit Ihre Bilder auf der Seite angezeigt werden. Finden Sie heraus, wo die Bilder auf der Seite angezeigt werden sollen, und kopieren Sie sie ein:
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
Das ist alles, was es dazu gibt. Als ich anfing, einen Image Rotator zu meiner Site hinzuzufügen, war es nicht so einfach wie das Kopieren und Einfügen. Ich habe verschiedene Codebeispiele durchgesehen, die ich online gefunden habe. Die meisten von ihnen haben nicht funktioniert. Dieser obige Code hat auch nicht funktioniert, aber dann habe ich hier und da ein paar Änderungen vorgenommen und es geschafft, ihn zum Laufen zu bringen. Ich habe den harten Teil für dich gemacht. Jetzt müssen Sie nur noch Ihre Bilder und Links aktualisieren, ein wenig kopieren und Einfügen und los geht’s.
Wenn Sie diesen Bildrotator auf mehreren verschiedenen Seiten Ihrer Website verwenden möchten und später die Bilder und Inhalte ändern müssen, können Sie dies von einem Ort aus tun. Dies erfordert jedoch eine gewisse Vorausplanung. Kehren wir zum Beispiel einer Immobilienseite zurück. Wenn Sie die Bilder speichern, empfehle ich, für jedes Bild dieselbe Konvention zu verwenden, z. B. „House1.jpg“ und „House2.jpg“ und so weiter. Wenn Sie dann eine neue Reihe von Häusern präsentieren möchten, benennen Sie die neuen Bilder einfach mit denselben Dateinamen wie zuvor. Auf diese Weise zeigen alle Ihre Seiten die neuen Bilder an, nachdem der Browser den Cache gelöscht oder die Seite aktualisiert hat.
Das gleiche funktioniert für jeden der Links. Meine Empfehlung ist, jeden zu benennen .htm-Datei, „House1.htm“ und „House2.htm“ und so weiter. Auf diese Weise müssen Sie lediglich den Inhalt in der .htm-Dateien und die Links im Image Rotator verweisen automatisch auf den neuen Inhalt.