Jan 27, 2009 - General Web Development    Comments Off on JavaScript: Ad rotator simple image

JavaScript: Ad rotator simple image

Let’s say you need to rotate images, banners, etc. Just replace Text in ad array and in links array, define your image properties… and you’re done! (PS. both arrays must be the same length)

+---------------------------------------------------------+
 | Ad Simple Copyright http://www.YugDesign.com |
 +---------------------------------------------------------+
 | This program may be used and hosted free of charge by |
 |anyone for personal purpose as long as this copyright |
 |notice remains intact. |
 +---------------------------------------------------------+
 */
 <!--[if !supportEmptyParas]--> <!--[endif]-->
 var img_width = "468";
 var img_height = "60";
 var img_title = "Click Here";
 <!--[if !supportEmptyParas]--> <!--[endif]-->
 <!--[if !supportEmptyParas]--> <!--[endif]-->
 var ad=new Array()
 //insert here your images src
 ad[0]='http://www.site.com/image1';
 ad[1]='http://www.site.com/image2';
 ad[2]='http://www.site.com/image3';
 ad[3]='http://www.site.com/image4';
 ad[4]='http://www.site.com/image5';
 <!--[if !supportEmptyParas]--> <!--[endif]-->
 var links=new Array()
 //insert here your links
 links[0]='http://www.links1';
 links[1]='http://www.links2';
 links[2]='http://www.links3';
 links[3]='http://www.links4';
 links[4]='http://www.links5';
 <!--[if !supportEmptyParas]--> <!--[endif]-->
 var xy=Math.floor(Math.random()*ad.length);
 document.write('');[/code:3hbrmmj7]

ASP – Banner Ad Rotator

If you want to rotate banner advertisements on your web page, you are in luck. You can use the simple and straightforward Ad Rotator component, which comes standard with ASP. The first thing you need to do is create a text file called adrotator.txt and copy the code below:

REDIRECT /anyfile.asp
 WIDTH 468
 HEIGHT 60
 BORDER 1
 *
 http://www.YOUR_DOMAIN_NAME.com/images/banner1.gif
 http://www.ADVERTISER1_DOMAIN_NAME.com
 Visit Advertiser1 now!
 25
 http://www.YOUR_DOMAIN_NAME.com/images/banner2.gif
 http://www.ADVERTISER2_DOMAIN_NAME.com
 Visit Advertiser2 now!
 25
 http://www.YOUR_DOMAIN_NAME.com/images/banner3.gif
 http://www.ADVERTISER3_DOMAIN_NAME.com
 Visit Advertiser3 now!
 40
 http://www.YOUR_DOMAIN_NAME.com/images/banner4.gif
 http://www.ADVERTISER4_DOMAIN_NAME.com
 Visit Advertiser4 now!
 10

This schedule has four banner ads in it. The top four lines are optional, but the * is required. The Redirect send all banner ad clicks to a specified ASP file, you can use this option if you want to track banner ad statistics. The Width and Height set the dimensions of the banner ad, and the Border sets the border thickness around the banner.

  • After the *, you can list as many banners as you want. Each banner that you list, consists of four lines: URL of banner ad image
  • URL users will be sent to when they click on the banner ad
  • the image ALT text
  • the percentage of time that you want the banner to display on the page (must total 100 naturally).

Next, paste the following code to any ASP page where you want to display your banner ads:

<%
 DIM strBanners
 Set strBanners = Server.CreateObject("MSWC.AdRotator"
 Response.Write (strBanners.GetAdvertisement("/adrotator.txt")
 %>

All done. Now you have a professional looking banner ad rotation system. Now, it’s up to you to go out and find some advertisers!

Banner Ad Rotator

Summary

Learn to make a banner rotate include file. All code is available. View the demo to see the result.

Intro

When I built the first version of Haneng.com I needed a banner rotator, but I felt that the included “Ad Rotator Component” didn’t cut the mustard. I considered using a SQL database for the job, but to relieve the stress on it I decided to use pure VBScript in an include file. For this lesson I have removed a lot of the fancy stuff like the counters (keeping track of the number of displayed banners, clicks per banners etc.), but this is easy to add. This result in an easy script, that even runs on PWS.

Finding a random value

We need to make a random value, so that we can display random banners. We use the built in random function to get a random number that we use to select one of the banner. To get this value I use this code:

<%
RANDOMIZE
LowestNumber = 1
HighestNumber = 10
RandomNumber = INT((HighestNumber-LowestNumber+1)*Rnd+LowestNumber)
%>

The RANDOMIZE must come first, it ensures that the value we get really is random. (We don’t want our script to only show one banner all the time). We set the LowestNumber to the lowest value we want and the HighestNumber to the highest value we want. So when we set the lowest number to 1 and the highest number to 10 the RandomValue variable will get one of the following values: 1, 2, 3, 4, 5, 6, 7, 8, 9 or 10.

Using the last digit to select a banner:

OK, now we got a random number. Now I use the SELECT CASE function to select a banner. The code will look like this:

<%
RANDOMIZE
LowestNumber = 1
HighestNumber = 10
RandomNumber = INT((HighestNumber-LowestNumber+1)*Rnd+LowestNumber)
SELECT CASE RandomNumber
CASE "1"%>
<A xhref="link1.htm"><IMG xsrc="banner1.gif" BORDER=0></A>
<%CASE "2"%>
<A xhref="link2.htm"><IMG xsrc="banner2.gif" BORDER=0></A>
<%CASE "3"%>
<A xhref="link3.htm"><IMG xsrc="banner3.gif" BORDER=0></A>
<%CASE "4"%>
<A xhref="link4.htm"><IMG xsrc="banner4.gif" BORDER=0></A>
<%CASE "5"%>
<A xhref="link5.htm"><IMG xsrc="banner5.gif" BORDER=0></A>
<%CASE "6"%>
<A xhref="link6.htm"><IMG xsrc="banner6.gif" BORDER=0></A>
<%CASE "7"%>
<A xhref="link7.htm"><IMG xsrc="banner7.gif" BORDER=0></A>
<%CASE "8"%>
<A xhref="link8.htm"><IMG xsrc="banner8.gif" BORDER=0></A>
<%CASE "9"%>
<A xhref="link9.htm"><IMG xsrc="banner9.gif" BORDER=0></A>
<%CASE "10"%>
<A xhref="link10.htm"><IMG xsrc="banner10.gif" BORDER=0></A>

<%END SELECT%>

Just put the URL’s where the “link” is, and make some banners that you link to in the IMG tag. And boom you got your own banner ad rotator!

Implementation

Save the above code in a text file call it banner.asp, modify the links and make ten banner images. You can also download the Lesson2.zip file, unzip it and open banner.asp in a text editor (like Notepad) to modify it. (It also contains 10 sample banner images).

Now use this line of code on all the pages where you want the banners to appear:

Using an include file makes the whole thing easier to maintain. Just modify the banner.asp file, and all the pages on your site are updated. Just make sure that banner.asp is in the same directory as the script you include it in. If you want to include banner.asp into scripts that are located in subdirectories you can place banner.asp in the root of your site and use this include statement in stead:

Modifications

You can display much more than random banners with this code. You can make “Tip of the day”, “News flash” or a “Random link”. For banner use, you should add counters. Use the “Counters component”, a text file or a SQL database to track how many times a banner has been shown, how many times it has been clicked etc.

A last comment

I hope you can use this code, it’s pretty basic, but everybody has to start somewhere right?