nogle gange et enkelt billede er bare ikke nok til at fremvise alt, hvad du ønsker at fremme på din hjemmeside. Hvis du nogensinde har spekuleret på, hvordan nogle steder får flere billeder til at rotere, og du gerne vil gøre det selv, så undrer du dig ikke mere. Jeg er her for at vise dig, hvordan det gøres. Også, som en ekstra fordel, Jeg vil vise dig, hvordan du kan opdatere dine billeder på et sted og få disse opdateringer vises globalt på din hjemmeside.
lad os sige, at du har et madlavningssted, og du vil have billeder af de fem seneste måltider, som du har vist, til at rotere i banneret. Eller lad os sige, at du har en ejendomsside, og du vil have billeder af dine 10 seneste lister til at rotere på et bestemt sted på alle dine sider. Hvis du vil tilføje funktionalitet, skal hvert billede linke til en anden side. Alt dette er ikke noget problem med følgende kode.
først skal du organisere dig. Saml alle dine billeder i den samme mappe, og sørg for, at de har samme størrelse. Hvis de ikke har samme størrelse, og du ikke vil fordreje dem, skal du blot ændre størrelsen på lærredet på hvert billede og ikke ændre størrelsen på selve billedet. På den måde ændrer pladsholderen, hvor billederne vises, ikke form, da hvert nyt billede vises.
for det andet skal du samle alle de links, du vil have tilknyttet billederne, og gemme dem et praktisk sted, så du kan kopiere og indsætte dem senere.
for det tredje skal du indsætte følgende i overskriften for hver side, du vil have billedrotatoren til at 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 øjekast kan denne kode virke skræmmende. Alt hvad du skal gøre er dog at opdatere stien til billedfilerne og udfylde URL ‘ erne til linkene. Selvfølgelig bør du også opdatere højde-og breddeattributterne, så de passer til din hjemmeside.
hvis du kun vil have fire billeder til at rotere, skal du blot slette en af elementrækkerne. Hvis du vil tilføje en, skal du kopiere og indsætte og opdatere elementer til elementer og så videre.
du har nu lagt grunden arbejde for at tilføje dette billede rotator til din hjemmeside. Men der er endnu et trin, du skal gøre for at dine billeder skal vises på siden. Find ud af, hvor billederne skal vises på siden, og kopier i:
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
det er alt, hvad der er til det. Da jeg først begyndte at arbejde på at tilføje en billedrotator til min side, var det ikke så nemt som at kopiere og indsætte. Jeg gennemgik flere forskellige eksempler på kode, som jeg fandt online. De fleste af dem virkede ikke. Ovenstående kode fungerede heller ikke, men så lavede jeg et par justeringer her og der og formåede at få det til at fungere. Jeg gjorde det svære for dig. Nu skal du bare opdatere dine billeder og links, lave lidt kopiering og indsætte, og væk går du.
hvis du beslutter dig for at bruge denne billedrotator på flere forskellige sider på din side, og derefter senere skal du ændre billederne og indholdet, kan du gøre det fra et sted. Dette kræver dog en vis planlægning fremad. Lad os gå tilbage til eksemplet på en ejendomsside. Når du gemmer billederne, anbefaler jeg at bruge den samme konvention for hvert billede, for eksempel “Hus1.jpg ” og ” House2.jpg ” osv. Når du derefter vil fremvise en ny serie huse, skal du blot navngive de nye billeder ved hjælp af de samme filnavne som før. På den måde viser alle dine sider de nye billeder, når bro.sereren rydder cachen, eller du opdaterer siden.
det samme fungerer for hver af linkene. Min anbefaling er at navngive hver .htm-fil, ” Hus1.htm ” og ” House2.htm ” og så videre. På denne måde er alt hvad du skal gøre at opdatere indholdet i .htm-filer og linkene i billedrotatoren peger automatisk på det nye indhold.