soms is een enkele afbeelding gewoon niet genoeg om alles te laten zien dat u wilt promoten op uw site. Als je je ooit hebt afgevraagd hoe sommige sites krijgen verschillende afbeeldingen te roteren en je zou willen om dat zelf te doen, nou, vraag me niet meer af. Ik kom je laten zien hoe het moet. Ook, als een bijkomend voordeel, zal ik u laten zien hoe u uw beelden op één locatie kunt bijwerken en deze updates wereldwijd op uw site kunt laten verschijnen.
laten we zeggen dat je een kook site, en je wilt foto ‘ s van de vijf meest recente maaltijden die je hebt gekenmerkt om te draaien in de banner. Of, laten we zeggen dat je een onroerend goed website en u wilt foto ’s van uw 10 meest recente advertenties te roteren op een specifieke plek op al uw pagina’ s. Als u functionaliteit wilt toevoegen, wilt u dat elke afbeelding naar een andere pagina linkt. Dit alles is geen probleem met de volgende code.
eerst moet je je organiseren. Verzamel al uw afbeeldingen in dezelfde map en zorg ervoor dat ze dezelfde grootte hebben. Als ze niet dezelfde grootte hebben en u wilt ze niet vervormen, dan kunt u het formaat van het canvas van elke afbeelding wijzigen en de grootte van de afbeelding zelf niet wijzigen. Op die manier zal de plaatshouder waar de afbeeldingen verschijnen niet van vorm veranderen als elke nieuwe afbeelding verschijnt.
ten tweede, verzamel alle links die u wilt in verband met de afbeeldingen en sla ze ergens handig, zodat u kunt kopiëren en plakken ze later.
Ten derde moet u het volgende in de koptekst plakken voor elke pagina waarvan u wilt dat de afbeeldingsrotator wordt weergegeven:
<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>
op het eerste gezicht kan deze code intimiderend lijken. Echter, alles wat je hoeft te doen is het bijwerken van het pad naar de afbeeldingsbestanden en vul de URL ‘ s voor de links. Natuurlijk, je moet ook de hoogte en breedte attributen bij te werken om uw site te passen.
als u slechts vier afbeeldingen wilt roteren, verwijdert u gewoon een van de itemrijen. Als u er een wilt toevoegen, kopieer en plak en werk items bij aan items enzovoort.
je hebt nu de basis gelegd voor het toevoegen van deze afbeelding rotator aan uw site. Maar er is nog een stap die u moet doen om uw afbeeldingen op de pagina te laten verschijnen. Zoek uit waar u de afbeeldingen wilt weergeven op de pagina en kopieer in:
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
dat is alles wat er is. Toen ik voor het eerst begon te werken aan het toevoegen van een afbeelding rotator aan mijn site, het was niet zo eenvoudig als kopiëren en plakken. Ik ging door verschillende voorbeelden van code die ik online vond. De meeste werkten niet. Deze bovenstaande code werkte ook niet, maar toen maakte ik een paar tweaks hier en daar en slaagde erin om het aan de slag te krijgen. Ik heb het moeilijke deel voor je gedaan. Nu alles wat je hoeft te doen is het bijwerken van uw afbeeldingen en links, doe een beetje kopiëren en plakken, en weg ga je.
als u besluit om deze afbeelding rotator te gebruiken op verschillende pagina ‘ s binnen uw site en dan later moet u de afbeeldingen en inhoud te wijzigen kunt u dit doen vanaf één locatie. Dit vereist echter enige planning vooraf. Laten we teruggaan naar het voorbeeld van een onroerend goed website. Wanneer u de afbeeldingen opslaat, raad ik aan om voor elke afbeelding dezelfde conventie te gebruiken, bijvoorbeeld “House1.jpg “en” House2.jpg ” enzovoort. Als u vervolgens een nieuwe reeks huizen wilt weergeven, geeft u de nieuwe afbeeldingen een naam met dezelfde bestandsnamen als voorheen. Op die manier zullen al uw pagina ‘ s de nieuwe afbeeldingen tonen nadat de browser de cache wist of u de pagina vernieuwt.
hetzelfde werkt voor elk van de links. Mijn aanbeveling is om elk een naam te geven .htm bestand, ” Huis 1.htm “en” House2.htm ” enzovoort. Op deze manier, alles wat je hoeft te doen is het bijwerken van de inhoud binnen de .htm-bestanden en de links in de image rotator zullen automatisch naar de nieuwe inhoud wijzen.