oz web hub

Rotating banners

Here is a great little script for rotating banners throughout your website. The code in the text box below can be copied and pasted into a simple text editor and saved, as is, as banner.js. Within this code you will notice that it is set up with three banners, each linked to a different url. You can have as many ads in this simple rotator as you wish, just add them following the same format as the ones shown. Also, ensure you change the var ad_count number from 3 to however many ads you have in the rotation

<script Language="JavaScript"> var ad_count = 3; var now = new Date() var sec = now.getSeconds() var ad = sec % ad_count; ad +=1; if (ad==1) { url="http://www.ozwebhub.com"; alt="The best webmaster site"; banner="http://www.ozwebhub.com/something.jpg"; width="468"; height="60"; } if (ad==2) { url="http://www.knowledgecollegetutors.com/"; alt="The best java scripts around"; banner="http://www.knowledgecollegetutors.com/header2.gif"; width="468"; height="60"; } if (ad==3) { url="http://www.knowledgecollegetutors.com"; alt="The best computer for beginners site"; banner="http://www.knowledgecollegetutors.com/header1.gif"; width="468"; height="60"; } document.write('<center>'); document.write('<a href="' + url + '" target="_blank">'); document.write('<img src="' + banner + '" width='+ width + ' height=' + height + ' alt="' + alt + '" border=0><br>'); document.write('</center>'); </script>

Naturally you change the URL and banner images to the ones you want. You will need to change the size of the banners if they are not the standard 468 * 60

Now place this script on the web pages you want the banners to appear

<script language="JavaScript" src="banner.js"></script>

Back to Javascripts index

Rotating content

Paste the following in the Body of the page where you want the content to appear.

<script type="text/javascript"> //Courtesy of BoogieJack.com var msg = new Array(); insert = new Date(); today = insert.getDate(); msg[0]="Tip 1" msg[1]="Tip 2" msg[2]="Tip 3" msg[3]="Tip 4" msg[4]="Tip 5" msg[5]="Tip 6" msg[6]="Tip 7" msg[7]="Tip 8" msg[8]="Tip 9" msg[9]="Tip 10" msg[10]="Tip 11" msg[11]="Tip 12" MSG[12]="Tip 13" MSG[13]="Tip 14" MSG[14]="Tip 15" MSG[15]="Tip 16" MSG[16]="Tip 17" MSG[17]="Tip 18" MSG[18]="Tip 19" MSG[19]="Tip 20" MSG[20]="Tip 21" MSG[21]="Tip 22" MSG[22]="Tip 23" MSG[23]="Tip 24" MSG[24]="Tip 25" MSG[25]="Tip 26" MSG[26]="Tip 27" MSG[27]="Tip 28" MSG[28]="Tip 29" MSG[29]="Tip 30" MSG[30]="Tip 31" document.write(MSG[today-1]); </script>

Just replace the Tip 1 text, and the rest of the "Tips" with your message. Be careful not to use any special characters or it will break the script.

Rotating images

Set to new image every 5 seconds

Place this in HEAD tags

  <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> <!-- // Courtesy of SimplytheBest.net (http://simplythebest.net/info/dhtml_scripts.html) gSlideshowInterval = 5; gNumberOfImages = 5; gImages = new Array(gNumberOfImages); gImages[0] = "images/slideshow1.gif"; gImages[1] = "images/slideshow2.gif"; gImages[2] = "images/slideshow3.gif"; gImages[3] = "images/slideshow4.gif"; gImages[4] = "images/slideshow5.gif"; function canManipulateImages() { if (document.images) return true; else return false; } function loadSlide(imageURL) { if (gImageCapableBrowser) { document.slide.src = imageURL; return false; } else { return true; } } function nextSlide() { gCurrentImage = (gCurrentImage + 1) % gNumberOfImages; loadSlide(gImages[gCurrentImage]); } gImageCapableBrowser = canManipulateImages(); gCurrentImage = 0; setInterval("nextSlide()",gSlideshowInterval * 1000); // --> </SCRIPT>

Place in BODY tags

<P ALIGN=left><a href="http://simplythebest.net"><IMG SRC="images/slideshow_1.gif" BORDER=0 ALT="SimplytheBest.net" NAME="slide"></a><p><p><p><p></P>

Define the images and set the timer for the slideshow in this section of the script:

You must replace the images, slideshows and URLs with your own.

CodeLifter

Protect your HTML

Back to Javascripts index

« computers | web design »