ibland en enda bild bara är inte tillräckligt för att visa upp allt som du vill främja på din webbplats. Om du någonsin undrat hur vissa webbplatser får flera bilder att rotera och du vill göra det själv, undrar du inte mer. Jag är här för att visa dig hur det görs. Som en extra fördel kommer jag också att visa dig hur du kan uppdatera dina bilder på en plats och få dessa uppdateringar att visas globalt på din webbplats.

låt oss säga att du har en matlagningsplats, och du vill ha bilder av de fem senaste måltiderna som du har presenterat för att rotera i bannern. Eller låt oss säga att du har en fastighetssida och du vill ha bilder på dina 10 senaste listor för att rotera på en viss plats på alla dina sidor. För att lägga till funktionalitet vill du att varje bild ska länka till en annan sida. Allt detta är inga problem med följande kod.

först måste du bli organiserad. Samla alla dina bilder i samma mapp och se till att de har samma storlek. Om de inte har samma storlek och du inte vill snedvrida dem, ändra storlek på duken för varje bild och ändra inte storleken på själva bilden. På så sätt ändras inte platshållaren där bilderna visas när varje ny bild visas.

för det andra, samla alla länkar som du vill associeras med bilderna och spara dem någonstans bekvämt så att du kan kopiera och klistra in dem senare.

för det tredje måste du klistra in följande i rubriken för varje sida du vill att bildrotatorn ska visas:

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

vid första anblicken kan den här koden verka skrämmande. Allt du behöver göra är dock att uppdatera sökvägen till bildfilerna och fylla i webbadresserna för länkarna. Naturligtvis bör du också uppdatera höjd-och breddattributen så att de passar din webbplats.

om du bara vill att fyra bilder ska rotera, raderar du bara en av artikelraderna. Om du vill lägga till en, kopiera och klistra in och uppdatera objekt till objekt och så vidare.

du har nu lagt grunden för att lägga till den här bildrotatorn på din webbplats. Men det finns ytterligare ett steg du behöver göra för att dina bilder ska visas på sidan. Ta reda på var du vill att bilderna ska visas på sidan och kopiera in:

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

det är allt som finns till det. När jag först började arbeta med att lägga till en bildrotator på min webbplats var det inte lika enkelt som att kopiera och klistra in. Jag gick igenom flera olika exempel på kod som jag hittade online. De flesta av dem fungerade inte. Ovanstående kod fungerade inte heller, men då gjorde jag några tweaks här och där och lyckades få det att fungera. Jag gjorde det svåra för dig. Nu behöver du bara uppdatera dina bilder och länkar, göra lite kopiering och klistra in, och bort går du.

om du väljer att använda denna bild rotator på flera olika sidor på din webbplats och sedan senare måste du ändra bilder och innehåll kan du göra det från en plats. Detta kräver dock viss planering framåt. Låt oss gå tillbaka till exemplet på en fastighetsplats. När du sparar bilderna rekommenderar jag att du använder samma konvention för varje bild, till exempel ”House1.jpg ” och ” House2.jpg ” och så vidare. Sedan, när du vill visa upp en ny serie hus, namnge helt enkelt de nya bilderna med samma filnamn som tidigare. På så sätt visar alla dina sidor de nya bilderna efter att webbläsaren rensar cacheminnet eller du uppdaterar sidan.

samma fungerar för var och en av länkarna. Min rekommendation är att namnge varje .htm-fil, ” House1.htm ” och ” House2.htm ” och så vidare. På så sätt behöver du bara uppdatera innehållet i .htm-filer och länkarna i bildrotatorn pekar automatiskt på det nya innehållet.