Do Not open from index

B efore we begin, we feel obligated to advise you that this tutorial is not designed for anyone who does not have a good solid knowledge of HTML coding and absolute positioning div tags*. In other words, if you are a novice, please do not attempt this until you are proficient with HTML codes, reconfigurations and absolute positioning. This entire page is constructed with the use of these div tags. Reason being is that the script itself makes use of positioning tags.

Example Of Absolute Positioning Tag *

<div id="example" style="position:absolute;left:228;top:60;font:bold 12px Arial">
Your Material Goes Here</div>

I f you would like to know more on "Absolute Positioning" div tags, grab the below link and you are there.
[ Absolue Positioning Div Tags ]

T this is a three part, copy and paste code with reconfigurations in all three parts. The <HEAD> section, <BODY> tag and <BODY> sections of the script. You must also insert an onLoad event handler directly into your "complete" <BODY> tag. In the script itself you get an incomplete body tag with just the event handler and no text or link attributes. The way you will see the script from the script site is a complete HTML document with nothing but the code on it.

T he first reconfigurations are within the <HEAD> section of the script. There are four(4) separate reconfigurations within this section.

Upload at least 4* banners and define their path.
Define the URL's for the corresponding banners.
Define mouse-over text message effect for task bar message for each banner.
* Default has four banners in the code.
Reset the time lapse between the banners changing (optional)

Upload And Define Banners

* Part 2 actually referrs to the part of the script located in the <BODY>
section of the script. We will explain that further down.

B elow is the actual configuration of defining the path of the uploaded banners. Notice how they are defined. If you upload the banners into any other directory other than the directory the script will be on, then you need to add the prefix of the directory the banners reside. For example, our banners reside in our "/images" directory, so..............................
The path would be
banner1.src = "/images/banner 1.gif";

But, since proper HTML dictates the use of the complete path, it should look something like this:

banner1.src = "http://www.yourdomain.com/images/banner 1.gif";

URL's (Path) Defined For Each Banner

T his part is quite self-explanitory. Place the URL (Path) for each corresponding banner. Be sure that the numbers for each banner are linked to the correct banner. For example: Banner1.gif links to links[1] etc.

var links = new Array
/*
Put your link between the quotation marks " and " if they are outside of the domain make sure that you indicate that with something like: http://www.mydomain.com/thislink.html
*/
links[1] = "URL For Banner 1 Here"
links[2] = "URL For Banner 2 Here"
links[3] = "URL For Banner 3 Here"
links[4] = "URL For Banner 4 Here"

Reconfigure Mouse-Over Text Message In Task Bar **

** What this means is quite simple. When your cursor touches each individual banner, you will have a custom message appear in the task bar in the left corner at the bottom of your screen.
Go ahead and touch the banners and see the custom message appear.

var description = new Array
description[1] = "Your Custom Message For Banner 1 Goes Here"
description[2] = "Your Custom Message For Banner 2 Goes Here"
description[3] = "Your Custom Message For Banner 3 Goes Here"
description[4] = "Your Custom Message For Banner 4 Goes Here"

I f you want to add more than the default number of four ( 4 ) banners, just follow the number sequence in all the above parts. In other words, the next banner you would add would be number five ( 5 ).

N ow for the last part of the <HEAD> section reconfigurations. This part deals with the timing*** of the rotation. This part is optional. You can either leave it as is (like we have) or play around with it until you like the timimg sequence.

*** All this does is set how fast or how slow the banners change.

Reset Timing On Banner Rotation ~ Optional

function loadBanner(){

var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
closeTime=hours*3600+mins*60+secs;
closeTime+=5; /* Change this number to increase decrease the rotation speed */
Timer();

T he next thing we shall cover is the <BODY> tag and onload event handler.

Default Incomplete Body Tag With onload Handler

Reconfigured Complete Body Tag With onload Handler

N otice we added the attributes of text and link colors that the default body tag was lacking.

N ow we we show you the absolute positioning portion of this script. Here is where your knowledge of absolute positioning tags are necessary for positioning the banners. you can leave these settings as is but.........
We will let you decide when you get this script up and running if you want to reset the positioning of the banners.

The below statement is included in the script and is a direct quote from the creator of this script

T he above javascript, just like the little explanation tells you, is to test for browser type and for positioning of the banners. We will define what each setting means. They are all color coded and if you notice on both sections:

</div> ( For Explorer )
</layer> ( For Netscape )

The numbers, url's and images are the same for both and must stay the same because they reflect banner1 and all its attributes. What this means is that if you elect to change the setting for the </div> tag, the </layer> tag attributes must also be changed to the same settings.

Define Settings Within Div and Layer Tags

T he first settings we will define are those for </div> ( Explorer )

<div style="position:absolute; ID:banner; left:140px; top:13;

left:140px; ~ How many pixels from the left margin
top:13 ~ How many pixels from the top of the page.

width:468px; height:60px;

width:468px; ~ How many pixels wide (long) the banners are
height:60px; ~ How high the banners are

<img src="banner1.gif" border=0 name="banner" width="468" height="60"

<img src="banner1.gif" ~ Refers to banner1.gif

468" height="60" ~ This is the size * in pixels of the banners within the code

* Be sure all the banners are the same size or they will not look right.
They Do Not have to be 468 x 60 (industry standard) but they all have to be the same size.

</a> ~ This denotes the closing of the link on mouse-over.

</div> ~ This is the closing div tag that closes the absolute positioning with Explorer.

T he below settings we will now define are for the </layer> tag for ( Netscape ).

<layer left="140" top="13" width="468" height="60"

left="140" ~ How many pixels from the left margin

top="13" ~ How many pixels from the top of the page.

width:468px; height:60px;

width:468px; ~ How many pixels wide (long) the banners are
height:60px; ~ How high the banners are

<img src="banner1.gif"

~ Refers to banner1.gif

468" height="60" ~ This is the size * in pixels of the banners within the code

* Be sure all the banners are the same size or they will not look right.
They Do Not have to be 468 x 60 (industry standard) but they all have to be the same size.

</a> ~ This denotes the closing of the link on mouse-over.

</layer> ~ This is the closing layer tag that closes the absolute positioning with Netscape.

I f you would like to add this effect into your pages, just grab the below link and you are there. If you have any problems with this, feel free to contact us.
[ Get Code Here ]

Banner Rotation Tutorial