noen ganger er et enkelt bilde bare ikke nok til å vise frem alt du ønsker å fremme på nettstedet ditt. Hvis du noen gang har lurt på hvordan noen nettsteder får flere bilder å rotere, og du vil gjerne gjøre det selv, vel, lurer ikke mer. Jeg er her for å vise deg hvordan det gjøres. Som en ekstra fordel vil jeg også vise deg hvordan du kan oppdatere bildene dine på ett sted og få disse oppdateringene til å vises globalt på nettstedet ditt.

La oss si at du har et matlagingssted, og du vil ha bilder av de fem siste måltidene du har omtalt for å rotere i banneret. Eller la oss si at du har et eiendomsside, og du vil ha bilder av dine 10 nyeste oppføringer for å rotere på et bestemt sted på alle sidene dine. Hvis du vil legge til funksjonalitet, vil du at hvert bilde skal koble til en annen side. Alt dette er ikke noe problem med følgende kode.

Først må du bli organisert. Samle alle bildene dine i samme mappe og sørg for at de er i samme størrelse. Hvis de ikke er i samme størrelse, og du ikke vil forvride dem, må du bare endre størrelsen på lerretet til hvert bilde og ikke endre størrelsen på selve bildet. På den måten endres ikke plassholderen der bildene vises, når hvert nytt bilde vises.

For Det andre, samle alle koblingene du vil ha knyttet til bildene, og lagre dem et sted som er praktisk, slik at du kan kopiere og lime dem inn senere.

For det Tredje må du lime inn følgende i overskriften for hver side du vil at bilderotatoren skal vises:

<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>

ved første øyekast kan denne koden virke skremmende. Men alt du trenger å gjøre er å oppdatere banen til bildefilene og fylle Ut Nettadressene for koblingene. Selvfølgelig bør du også oppdatere høyde – og breddeattributtene for å passe til nettstedet ditt.

hvis du bare vil at fire bilder skal rotere, sletter du bare en av elementradene. Hvis du vil legge til en, kopier og lim inn og oppdater elementer til elementer og så videre.

Du har nå lagt grunnlaget for å legge til denne bilderotatoren på nettstedet ditt. Men det er ett skritt du må gjøre for at bildene dine skal vises på siden. Finn ut hvor du vil at bildene skal vises på siden og kopier inn:

<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>

Det er alt der er til det. Da jeg først begynte å jobbe med å legge til en bilderotator på nettstedet mitt, var det ikke så enkelt som å kopiere og lime inn. Jeg gikk gjennom flere forskjellige eksempler på kode som jeg fant på nettet. De fleste av dem fungerte ikke. Denne koden ovenfor fungerte heller ikke, men da gjorde jeg noen tweaks her og der og klarte å få det til å fungere. Jeg gjorde den harde delen for deg. Nå er alt du trenger å gjøre er å oppdatere bilder og koblinger, gjøre litt kopiering og lime inn, og vekk du går.

hvis du bestemmer deg for å bruke denne bilderotatoren på flere forskjellige sider på nettstedet ditt, og senere må du endre bildene og innholdet du kan gjøre det fra ett sted. Dette krever imidlertid litt planlegging fremover. La oss gå tilbake til eksemplet på et eiendomssted. Når du lagrer bildene, anbefaler jeg at du bruker samme konvensjon for hvert bilde, for eksempel » House1.jpg » Og » House2.jpg » og så videre. Deretter, når du vil vise frem en ny serie hus, bare navngi de nye bildene med samme filnavn som før. På den måten vil alle sidene dine vise de nye bildene etter at nettleseren tømmer hurtigbufferen eller du oppdaterer siden.

det samme fungerer for hver av koblingene. Min anbefaling er å nevne hver .htm-fil, » House1.htm » Og » House2.htm » og så videre. Denne måten, alt du trenger å gjøre er å oppdatere innholdet i .htm-filer og koblingene i bildet rotator vil automatisk peke til det nye innholdet.