<Lesson 27> [Contents]<Lesson 29>
Displaying banners ads is a common practice for showing advertisements on web pages to the visitors. Banners ads are normally created using standard graphic tools such as Photoshop, Paintbrush Pro, and other software. Banner ads can be static or animated. Animated images are animated GIF files or flash movies. Flash movies are created using Macromedia Flash and the browsers must have installed flash plugin to view the movies. On the other hand, you can create some animated effect using JavaScript, like rotating static banner ads at a certain time interval.
28.1 Creating Rotating Banner Ads
Rotating banners ads comprises several banner images that constantly rotate on a webpage at a fix time interval. You can create these banner images using standard graphics tools. Let’s create four banner images and name them as banner1.jpg, banner2.jpg, banner3.jpg and banner4.jpg
The JavaScript starts by declaring an array to store the banner images using the new Array keywords, as follows:
MyBanners=new Array(‘banner1.jpg’,’banner2.jpg’,’banner3.jpg’,’banner4.jpg’)
Each element in the array is assigned with an index, starting from 0. In our example, banner1.jpg is assigned with index 0, banner2.jpg is assigned with index 1, banner3.jpg is assigned with index 2 and banner3.jpg is assigned with index 3.
To track the index of the current banner, we can assign the index to a variable. Here we use the variable banner and initialize it with a value 0 to load the first banner image.
Next, we create a function ShowBanners which will display all the banner images at fix interval. This can be achieved by incrementing the index values using the statement banner++ and when the index value is equal to the total number of elements in the array(denoted by MyBanners.length), the index value is set back to 0, which is the index of the first banner.
if (banner==MyBanners.length) {
banner=0}
The process is repeated at a fix time interval using the setTimeout ( ) function. The setTimeout ( ) function comprises two arguments, the first is the function to be activated, i.e the ShowBanners ( ) function and the second one is the duration measured in milliseconds, therefore 1000 is equivalent to 1 second so 5000 is equal to 5 seconds.
The final part of the JavaScript is to call out the ShowBanners ( ) function using the onload method
The Script
<html>
<head>
<script language="Javascript">MyBanners=new Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
banner=0
function ShowBanners()
{ if (document.images)
{ banner++
if (banner==MyBanners.length) {
banner=0}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/>
</center>
</body>
</html>
View banner.htm to see the above JavaScript in action
28.2 Creating Rotating Banner Ads with URL Links
Creating rotating banner images will provide the visitor to your webpage with some basic information. However, if you want the visitor to get more information by clicking on the banner images, you need to create rotating banner ads that contain URL links.
The script is basically the same as the previous one but we need to add another array that comprises the links, as follows:
MyBannerLinks=new Array('URL1','URL2','URL3/','URL4/')
You need to make sure that the arrangement of the links is in corresponding order with the banner images in the first array. Next, we create the ShowLinks function to link the current banner image to the relevant URL and then assign the URL to the href attribute of the anchor tag.
To load the banner images with URL links, we insert an anchor tag within the <body></body> section before the <img> tag that displays the current banner image. The anchor tag’s attribute href is used to call the ShowLinks( ) function when the visitor clicks on the banner.
The Script
<html>
<head>
<script language="Javascript">MyBanners=new Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
MyBannerLinks=new Array('http://www.vbtutor.net/','http://www.excelvbatutor.com/','http://onlinebizguide4you.com/','http://javascript-tutor.net/')
banner=0
function ShowLinks(){
document.location.href="http://www."+MyBannerLinks[banner]
}function ShowBanners()
{ if (document.images)
{ banner++
if (banner==MyBanners.length) {
banner=0}
document.ChangeBanner.src=MyBanners[banner]
setTimeout("ShowBanners()",5000)
}
}
</script>
<body onload="ShowBanners()">
<center>
<a href="javascript: ShowLinks()">
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/></a>
</center>
</body>
</html>
Click Banner Links to see the above JavaScript in action.
<Lesson 27> [Contents] <Lesson 29>