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  

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.

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.

First, in the HEAD we placed the following SCRIPT:

  <SCRIPT LANGUAGE="JavaScript">

  var light=1

  function lights()
  {if (light==1)
    {document.office.src="officelit.gif"; light=2}
  else
    {document.office.src="officedark.gif"; light=1}
  }
  </SCRIPT>

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

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

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  

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 http://www.linguistic-funland.com/scripts/#quiztest.

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  

Personalizing Pages - Cookies

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
       var town=document.getinfo.town.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
       expire.setYear(year)

//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)) } } }

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

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

</script>

Back to Contents