Rotating banner script

This tutorial will teach you how to set up a rotating banner script on your website, like the one that can be seen on the main page of the members are of our main website.

Introduction

Setting up the script is easy enough, even if you don't have a working knowledge of any scripting language. The tutorial will explain all that you need to know for the setup. However, there are a few things to be aware of ahead of time.

PHP

The script is written in PHP. As such, any page which runs PHP scripts must have a ".php" extension to it. So, instead of going to say:

http://www.starbase118.net/members/index.html

... you would be going to

http://wwww.starbase118.net/members/index.php

Changing the extension is simple. If you use Windows, you can open "Windows Explorer" and find the file. Then right-click on the file, and click "Rename." Then change the extension from whatever it is now, to ".php"

Keep in mind, though, that most WYSIWYG editors, like Microsoft FrontPage, won't be able to read a .php file, and will simply display to you the source of the file in HTML code. You can, however, keep the extension of your file as .html (or whatever other extension is necessary to edit the file in your WYSIWYG editor) until you are ready to upload the file, and then change it right before you upload. The extension needs to be present only on the server itself for the script to work -- it doesn't have to be present on your local machine as .php.

Using a text editor

While you can edit your main file where all of your HTML is kept in your WYSIWYG editor, if that's what you do, you will need to edit the other files which run the script in an actual text editor. It is very important that you do not use Microsoft Word, or Microsoft WordPad. Both of these programs add "invisible" formatting tags to your text, and will make your uploaded files unreadable. So, the best thing to do is open Microsoft Notepad. This is the only Microsoft editor which will give you clean, unformatted text.

Using includes

I use what's called a "php include" for this script, as it helps keep my main files "cleaner" while I'm working on them. For more information on what an include is, or how it works, see the PHP Includes tutorial. For the purposes of this tutorial, I will simply show you the includes as they are included in the files we use on the site.

Step 1: Creating your list of images

• randomship.ini - See the actual file used on the main site.

The first file we're going to create is called "randomship.ini" You will need to edit this file in a plain text editor, as mentioned above. Simply open Notepad (or whatever editor you're using) and save the file as "randomship.ini"

The purpose of this file is to list, for the script, all of the images you are using, the links you want the images to go to, and the "alternate text" that will be displayed if, for some reason, the image is not available at the time of display.

For each image you want to display, you will have a "block" of text. Each block will include five lines. Let's look at an example:

[USS Columbia]
src = "images/randomship/random-columbia.jpg"
alt = "USS Columbia"
url = "http://columbia.starbase118.net/"
title = "USS Columbia"

As you can see, line one simply names the block below. It tells the script that there is a block which is going to include information that will help the script work. This line is in brackets, [like so]. You can use any arbitrary name for each block, but in the file used on the main website, I found it easiest to just identify each block by the name of the ship that the image is for.

Line two gives the source of the image file. You can use a "relative" link, or an "absolute" link. The former is what I use above. This means that I give the path to the link "relative" to the file that I'm calling it from. I'm calling the file from "index.php" in our "members" folder on the site. The "images" folder is a sub-folder of "members" on our site, and "randomship" is a sub-folder of images. The latter, an absolute link, would look like this:

src = "http://www.starbase118.net/members/images/randomship/random-columbia.jpg"

You choose which method you find easiest.

Line three gives you the "alternate text" that will be displayed if, by chance, the image file cannot be found by the server.

Line four gives you the URL that you want the user to be able to go to when they click on the image. Simple enough.

The final line just gives a title to that link, so that when someone hovers their mouse over the image, it will display this text.

Once you have a full block, include one full line that has no text on it, and you can create your second block, for your second image. Continue doing so until you have all the images that you want to rotate in the banner.

Step 2: Creating your script file

• randomship.php - See the actual file used on the main site.

Now we need the file that does all the work. This is the simple part, because you only have to copy and paste it into a text file! So create a new text file using Notepad, and call it "randomship.php" Then, click on the link above to show you the file that we use on the main site. Copy that text into your new file, then save it, and close it.

Step 3: Making the image display

We have both of the files that make this script work, so now we just need to include them where we want them. So, find the page that you want the image to display on and open it up. If you don't know how to use the "view source" or "view HTML" part of your WYSIWYG editor, then you'll need to open this page in Notepad. Otherwise, you can open it in your WYSIWYG editor and just put the tags in via the "view source" or "view HTML" feature.

The first tag we need will call the script to the page, and tell the user's web-browser that it's about to run a script. You will put this tag above ALL OTHER HTML in your page. Above <html>, above <title>, above ALL of it! So switch over to the HTML/source view of your file and go all the way to the top of the file. Then, copy the following tag into the page:

<?php include "randomship.php"; ?>

With this done, now we just need to put a tag in which tells the script exactly where we want the image to display. So, switch back over to your main view, if you're using a WYSIWYG editor. Find the exact location where you'd like to display the image. At that location, put the following tag:

<?php randomImage("randomship.ini"); ?>

Now save your file and close it.

Step 4: Uploading

If you're using a WYSIWYG editor, then you need to change your file extension to .php on your page now. Then, upload all three files into the same directory. You should now see the image on your page.

You're done!