JavaScript Tutorial JavaScript Examples JQuery Tutorial HTML Tutorial About Us

Lesson 28: Creating Banner Ads


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.

banner++
if (banner==MyBanners.length) {
banner=0}

The process is repeated at a fix time interval using the setInterval () function. The setInterval () 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, 1000 is equivalent to 1 second. We use 2000 which is equal to 2 seconds. You can set any time interval you wish. We also create another function to stop running the banner ads, i.e stopbanner() which uses the clearInterval method to stop the timer. In addition, we need to create two buttons, one is to start the banner ads and the other one is to stop the banner ads.

The JavaScript
<script >
MyBanners=new Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
banner=0
function runbanners()
{
myVar=setInterval(ShowBanners,2000)}
		  
function ShowBanners()
{ if (document.images)
{ banner++
if (banner==MyBanners.length) {
banner=0}
document.ChangeBanner.src=MyBanners[banner]
}
}
function stopbanner()
{clearInterval(myVar);}	 /*stop the banner*/</span>
</script>
The HTML
<input type="button" onclick="runbanners()" value="Run Banners">
<img src="banner1.jpg" style="width:auto; height:auto; max-width:100%" name="ChangeBanner"/>

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 JavaScript 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
<script>
MyBanners=new Array('banner1.jpg','banner2.jpg','banner3.jpg','banner4.jpg')
MyBannerLinks=new Array('vbtutor.net/','excelvbatutor.com/'onlinebizguide4you.com/','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>
The HTML
<body onload="ShowBanners()">
<center>
<a href="javascript: ShowLinks()">
<img src="banner1.jpg" width="900" height="120" name="ChangeBanner"/></a>
</center>
</body>


❮ Previous Lesson Next Lesson ❯


Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy