Prometheus logo torch gif
How'd They Do That?

blue bar gif
Prometheus logo torch gif

Since our site is designed to TEACH, we thought some people might want to know how we did certain things. So here are some explanations for some effects that are not simple HTML.


Browser Check

JavaScript Capable?

Keep Off the Border

Sound from a Click

Alert Message

Status Bar Message -MouseOver

Imagemap Navigation and Information

Replacing an Image

Replacing Part of Image

Checking Quizzes

Personalizing Pages - Cookies

Back to Intro Page  up arrow gif

Browser Check

On the Introduction page
The script on the introduction page checks to see if a browser is Internet Explorer. There is a string that in position 25 will have "MSIE" if the browser is Internet Explorer. When a user chooses to enter the Prometheus Project, a JavaScript function checks for that string and if it is present, we transfer the viewer to a page that explains what problems there may be. The function looks like this:-

function browser_check() {
var BrowserType=navigator.userAgent;

if (BrowserType.indexOf("MSIE") == 25)
else {location.href="organizer/getinfo.html"}}

Of course there are many other browsers around besides Internet Explorer and Netscape.

This code is placed between SCRIPT tags in between the HEAD tags of the document. When the viewer clicks something to leave the page, this function is called using an onClick event.

Back to Contents  up arrow gif

JavaScript Capable

On the Introduction page
We check for the ability to execute JavaScript by including a JavaScript function in the link to leave the page (this is the browser check function). If it works, the viewer is moved to a Welcome page. If it doesn't work, the viewer is presented with a message that explains they will not be able to navigate the site as it requires a JavaScript enabled browser.
Rather than change pages, we have put the message about JavaScript wa-ay down at the bottom of the page and linked to a named anchor there. This message will briefly show even if the script works, but will appear for a much briefer time than a separate page would, since there is a limited amount of loading and formatting to do.
This is the action we use:-
<a href="#javascript" onClick="browser_check();">
This moves the page position to the anchor called "javascript" and calls the function browser_check()

At the "javascript" anchor the user sees:-

If the link to The Prometheus Project does not work, your browser cannot handle JavaScript. You won't be able to navigate this site. We are all very sorry.sad smiley gif

Back to Contents  up arrow gif

Keep Off the Border

Left-hand side borders are very pretty, but are hard to keep as borders only. That is, the text and graphics sometimes fall on top of the border. This can makes for a real mess.

We keep the border clear by putting the text and graphics into tables. We have a header table that spans the page. On most pages, the rest of the text and images are placed in the right-hand column of a two-column table. The first cell in the left-hand column of the table contains a transparent gif that is the width of the border. This will make all cells in that column that same width, if we keep the cells empty.

To find out the necessary size, use a paint program to crop the background border graphic so that only the colored border is left. Check the image characteristics for the width of the remaining image. Remove all colors but one and save this picture as a transparent gif, where the one color left is the transparent color.

NOTE: There is a width parameter for <TD> but this cannot be counted on to keep an empty cell at the width you want.

This is how it looks in the HTML code:-


***this is the first column that contains the transparent gif***
<td><img src="croppedblue.gif" width=134 height=10 border=0 alt="clear gif "></td>

<!-- Begin page text always in column 2-->
<td>Whatever you want to be off the border.....

Back to Contents  up arrow gif

Sound from a Click

This was included in an early version of the Welcome page
         [This was too cool to omit here, though to work with MSIE we had to do something different]
We wanted the sound of knocking on a door to be an event, rather than a background sound which would play as the page loaded. The solution for Netscape, but not MSIE, was the following code:

Just after the BODY tag -

<EMBED SRC="../knock.wav" HIDDEN=TRUE NAME="knock" MASTERSOUND autostart=false>
This code embeds the sound, names it "knock", but doesn't play it yet.

Later in BODY -

<A name="sound"></A>

<A href="#sound" onClick=";">Click here!</A>

Notice that the href for the anchor is a spot on the same page. This keeps the viewer on the same page.
When the "Click here!" is clicked, the sound plays. If you are using Netscape and have a sound card then try it! You'll be moved only to the top of this entry and hear a knock on the door.

Back to Contents  up arrow gif

Alert Message

You can have a message appear in the form of an alert box in response to a viewer's action. For example, if the viewer chooses an incorrect option from a list, a JavaScript alert box could pop up explaining why this is the wrong choice and telling the viewer to try again.

This is easily accomplished with JavaScript.
As an example, a number of radio buttons give the viewer choices but only one is correct. In the definition of the radio button we put:-

onClick="alert('This is the text you will see in the Alert box.')"
When the user clicks the radio button the alert box will display. That's it. Simple. Just be careful not to use quotes, neither double or single, inside the text that is between quotes. The computer will think you are ending the string of characters. Then it will get confused about the garbage that follows (well, it's garbage after the computer stops reading too soon!). If you just must use an apostrophe or quotes, put a backslash \ immediately in front of the character.


         <INPUT TYPE = 'radio' NAME = 'what' VALUE = '1'
         onClick="alert(' Hey. \n\nThat\'s cool! \nTry it again') ">
         (Please note this line would not normally be broken.)

The \n acts as a line break in the alert box window.

             This radio button uses the code above. Try it!.

Back to Contents  up arrow gif

Status Bar Messages

onMouseOver & onMouseOut events

[Changing the status bar as described below does not work in more recent browsers (January 2014). The browsers are not showing a status bar but a popup with the destination of the link. But performing an action with onMouseOver and onMouseOut events does work in general.]

As the mouse moves over a link, text appears on the status bar of the active window. This would be normally be the destination URL of the link. We can use this feature, however, to display our own text. This could be a description of the destination URL, like "Next Page" or the title of the page or an explanation of an image used as a link.
This is accomplished by using JavaScript to control the onMouseOver and onMouseOut events of a link. The JavaScript is placed in the anchor for the link.


<a href="#example" onMouseOver="window.status='You\'re not going anywhere! You\'re staying right here!';return true" onMouseOut="window.status=' ';return true">This Link</a>
Using a space between the single quotes in the "onMouseOut" part clears the status bar when the mouse moves on. You don't want to stare at the same message for TOO long.
Put your mouse cursor over this Link. What does the status bar say? Move the mouse off the link. Did the status bar change?

Try this Link. What does the status bar say? Move the mouse off the link. Did the status bar change? (Does not work under old versions MS Internet Explorer but it does work for IE5.)
Now do you see why we want to use the "onMouseOut"?

Back to Contents  up arrow gif

Imagemap Navigation and Information

Parts of images may be used as links. You need an image, a gif or jpg file. You need a program that will create the imagemap. (It can be done manually but is quite tedious.) Search for 'free image map'. Some results will be about programs to download and other about online sites that will generate a map for you.

The mapping program will let you define what part(s) of the image are links to what urls. It places the definitions at the end of the HTML file which will be displaying the image. You must put some code into the < img ....> which tells what map to use with this image since a HTML file can have multiple maps. Then you'll have HotSpots on your image - now an imagemap.


<IMG SRC="WORL0323.gif" WIDTH=113 HEIGHT=115 BORDER=0 ALT="map of North America gif" USEMAP="#Map">

USEMAP="#Map" says to apply the map named "Map" to the image. (Didn't get very creative here, did we?)

The <MAP></MAP> tags will contain a whole bunch of code like the following (this is why it is useful to have a mapping program):-

<MAP NAME="Map">
<AREA SHAPE=RECT COORDS="60,72,72,75" HREF="#map" ALT="Tennessee" onMouseOver="window.status='Tennessee - Go Vols!';return true" onMouseOut="window.status=' ';return true">

In the hotspots defined by the imagemap program, you can put anything you could put in any other HREF code, such as onMouseOver commands and onClick commands.

Let's try out some imagemap navigation to spots on this same page.

All map areas will have onMouseOver messages, but only some are links to other places on the page. The default message says "This is the ocean." So if a spot is not part of a HotSpot, that is the message you will see, even if it's not really part of the ocean!

(Special challenge - find Tennessee)

map of North America gif

Back to Contents  up arrow gif

Replacing an Image

Move your mouse over the torch to the right. It lights up.
Move your mouse off the torch. It returns to the original image.
tiny torch

This is done by replacing one image with another using some JavaScript. This can be done inline by writing the commands within the link or by using a function, where the code defining the function is in the HEAD of the page.

So what are the steps to do this replacement inline?

  • You first need two images - torchtiny.gif and torchtinyglow.gif.
  • Next add a NAME to the image tag so you can refer to it. We chose "example"
  • Next write the code for an onMouseOver event to change the image to the glowing torch and for onMouseOut to return to the original torch image.

    Here is our code:

    <A HREF=" " onMouseOver="document.example.src='torchtinyglow.gif' " onMouseOut="document.example.src='torchtiny.gif' "> <IMG NAME="example" SRC="torchtiny.gif" WIDTH=40 HEIGHT=40 BORDER=0 ALT="tiny torch" > </A>

    Let's look at what each piece is doing.

    • The HREF can be " " if you just want to change the image and not go to a different page. Otherwise it is the page or anchor to go to when the image is clicked.
    • The onMouseOver code says to look in this document for an object named example and set the source of "example" to torchtinyglow.gif.
    • The onMouseOut code says to change the source of the object example" back to torchtiny.gif.
    • IMG is where we name this image object example
    • Notice that we have double quote marks " in this code.We must be careful to use ' around the name of the gif files since we are already between " marks. Otherwise the JavaScript will fail but it may be hard to see why right away.

    Back to Contents  up arrow gif

    Replacing Part of an Image

    Sometimes you want to show how something changes, but only part of the image needs to change. It is silly to repeat an entire image, especially if the image is fairly large.

    Let's turn on the lights in the corner office of the top floor. Click on the corner window of the top floor.

    Did the image change? Click again? It should return to "lights off."

    Experiment with where you can click to make this happen. If your cursor seems to be stuck as an hourglass, just move it off the image. It should be fine.

    office picture top
    office top floor
    office picture bottom

    The technique for changing only a part of an image is easy, if you have a steady hand to slice with.

    So what are the steps?

    • First decide on what part of your image needs to change. Then use a graphics program to slice up your image into as many rectangular pieces as you need to isolate the part that will need to be replaced. This may require only 1 slice or it might get very involved. Try to keep it simple. A slice all the way across is much easier to work with than a rectangle inside the image somewhere.

      The trickiest part is slicing up the image without leaving out that last row of pixels!

    • Save the pieces as separate files.
    • Create the changed version of the part you want to change.
    • Create a table on your page where each cell contains a piece of the original image. This is MUCH easier if the slices are all horizontal or all vertical.
    • For the image piece that will change, place in the IMG tag a NAME so we can refer to it.
    • Next write a JavaScript function that changes the source for the image you want to change. Put the definition in the HEAD of the page. Call the function with an event like onMouseOver or onClick, or you can use the HREF itself as we did below.
    Here is the code we used.

    First, in the HEAD we placed the following SCRIPT:

      <SCRIPT LANGUAGE="JavaScript">

      var light=1

      function lights()
      {if (light==1)
        {"officelit.gif"; light=2}
        {"officedark.gif"; light=1}

    On the page we put the code for the table of image pieces:

      <TR><TD><IMG SRC="officetop.gif" WIDTH=185 HEIGHT=24 BORDER=0 ALT="office picture top"></TD>
      <TR><TD><A HREF="javascript:lights()"<>IMG NAME="office" SRC="officedark.gif" WIDTH=185 HEIGHT=10 BORDER=0 ALT="office top floor"> </A></TD>
      <TD><IMG SRC="officebottom.gif" WIDTH=186 HEIGHT=89 BORDER=0 ALT="office picture bottom"></TD>

    Notice that we have used a new method to call the function. We let the HREF do the work instead of the more usual onMouseOver or onClick. This lets us skip the question of where to move to, since we don't want to move anywhere at all.

    Also note that for most images you will have to be exact on the image sizes to get the same picture that you started with.

    Back to Contents  up arrow gif

    Checking Quizzes

    The problem with quizzing online is two-fold.

    1. How to validate the answers while keeping the student in the dark as to the correct answers.
    2. How to keep track of the students and their scores.

    JavaScript is not suitable to this task since the code is in the HTML document. Thus a savvy student could view the correct answers. We must turn to CGI scripts. CGI stands for "Common Gateway Interface" and just means a program that will communicate across the Internet between the client (the viewer's computer) and the server (the computer hosting the web pages). The viewer cannot see what is happening on the server. That area of the server is protected. So what we have is a program that receives input from a quiz form, compares the input with a list of correct answers, formats a new HTML document (in our case, one for 100% correct, one for < 100%), stores the viewer's name, email address, and score in a simple database file.

    Our quizzes are based on a script by:

    QuizTest Copyright © 1996 Kristina Pfaff-Harris and can be found at
    You can check there for complete explanations and setup instructions.

    Using CGI scripts requires access to parts of the web server to which ordinary users are blocked. You will have to negotiate an arrangement with your ISP or network administrator to be allowed such special privileges. (You are honest, reliable, cooperative, and debug your code thoroughly. Right??)

    Our scripts were working fine and suddenly quite working. Our ISP was not interested in telling us what they had changed and how to fix it!

    Back to Contents  up arrow gif

    Personalizing Pages - Cookies

    We use cookies to make a viewer's experience more personal. On a number of pages, we greet the viewer by their first name. To achieve this we first have to find out the viewer's name! You can get this information in a number of ways. For our purposes we have used forms. The user is prompted to enter the information we require, i.e. First Name, Initial, Last Name, Email address and the town they are from. They then click a button called "Make Cookie".

    This then calls a function that sets a cookie on the user's hard drive that we can access later. The code for making the cookie is put between SCRIPT tags in between the HEAD tags:-

    function makeCookie() {

    //this sets the variables for each value from the information the viewer entered in the form
           var fname=document.getinfo.fname.value
           var mi=document.getinfo.mi.value
           var lname=document.getinfo.lname.value
           var mail=document.getinfo.mail.value

    //this sets the expiry date of the the cookie to one year away, if there is no expiry date set the cookie information is only valid for the current browser session.
           var today = new Date()
           var expire = new Date()
           year = expire.getYear() + 1

    //this is the code that actually makes the cookie, the JavaScript syntax is document.cookie =. Each item has it's own name and they are all separated by a , (comma), this allows us to pick out the bits we want when we retrieve cookie information.
           document.cookie = "Prometheus=" + escape(fname) +
           ",Mi=" + escape(mi) +
           ",Lname=" + escape(lname) +
           ",Town=" + escape(town) +
           ",Mail=" + escape(mail) +
           "," + ((expire == null) ? "" : ("; expires=" + expire.toGMTString())) +
           "; path=/"; }

    To retrieve this information and use it on a web page we then use:-

    //this function will retrieve the cookie details where it finds the text "Prometheus="
    function getCookieName("Prometheus") {

           var search = Name + "="
           if (document.cookie.length > 0) {
                  offset = document.cookie.indexOf(search)
                  if (offset != -1) {
                         offset += search.length
                         end = document.cookie.indexOf(",", offset)
                         if (end == -1)
                  end = document.cookie.length
           return unescape(document.cookie.substring(offset, end)) } } }

    To get this into your web page you need to use the JavaScript document.write() function. For example:-

    <script language="javascript">
    var Fname = getCookieName("Prometheus")

    document.write("Hello " + Fname + "!")


    This will display Hello YourName! in the body of your web page.

    Back to Contents  up arrow gif

    Project Start
  • Alaska Greenland Iceland Canada Mexico - hot tamales Tennessee USA Central America Caribbean Islands