JavaScript Lesson 28: Creating Banner Ads

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone

<Previous Lesson> [Table of Contents]<Next Lesson>

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



<Previous Lesson> [Table of Contents] <Next Lesson>

 

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInEmail this to someone