Flexible Banner Rotator
3. Where in the Page
More of this Feature
Now that we have the script attached to our page the next thing we need to do is to identify where in our page that we want the rotating content to appear. We identify each of those spots by giving an appropriate HTML tag an id attribute. We can use whatever values for the ids that you like as long as they comply with the HTML standards for naming ids (basically anything that starts with a letter and only contains letters and numbers is your safest option). If you already have ids attached to appropriate tags then you don't need to add them, you can use the id that is already there.
Here's what the HTML for the first of the banner rotators in my sample page looks like:
<img src="pic1a.gif" width="50" height="50" border="0" alt="Cycling banner images" />
</div>
I gave a div tag an id of banner1 just because it was the first one I created and I decided that name was less likely to clash with any other ids in the page than if I used a shorter name. I also included a copy of one of the entries I intend to rotate in that spot in the page within the tag so that anyone without JavaScript at least sees one of the entries even though it doesn't rotate through the rest.
We next have to match the id we just allocated to a property of the banners object created at the top of the script. If you take a look at the copy of the script that you have saved you will see the following code near the top:
banner1 : ['a'
,'b'
,'c'
]
, banner2 : ['1' //start
,'2'
,'3'
,'4'
,'5'
] // end
};
The property names shown in bold need to match with the ids in the page where the content is to be rotated. If you want more than two blocks of content then copy the lines I have labelled here with the start and end comments (including those lines) to create as many rotators as you want and change the property names to match the ids. If you only want one rotator then delete those lines.
The final step is to plug the real content for each of our rotators into the array assigned to each property in place of the letters and numbers in the array. We'll cover how you tell each rotator what to rotate next.