How to Create Pages with Customizable Actors

Click here to open a new window with just the customizable actors from the opening page of this article. You can refer to this new window as we discuss how it is implemented. The screen shot below shows the html code for this new page.

This html code has four elements.

  • The first element is highlighted in blue and is part of some Javascript code. This element is executed when this Web page is loaded and loads all the image files that will be used on the page. Note this element is included between the script and /script tags and must be placed in the head part of the html.

  • The second part is highlighted in red and is also part of the Javascript code. This element contains the functions that are executed in response to various user actions.

  • The third element is highlighted in yellow. It is just the usual html code to include an image with one small difference: The name attribute gives this part of the page a name (photograph) that is used by the Javascript functions above to change the image that is displayed at this point in the page.

  • The final element is highlighted in green. It is the usual html code to include an image with two differences: The code beginning with onMouseOver specifies what should be done when the user mouses over this image and the code beginning with onMouseOut specifies what should be done when the user moves the mouse away from this image. This code causes the appropriate functions defined in the part of the code highlighted in red to be executed. These functions change the image displayed by the image tag with the name photograph. See the code highlighted in yellow.

You are probably writing your html pages using an editor like FrontPage or DreamWeaver. Most html editors allow you to edit the html code directly as well as through a more user-friendly interface. The easiest way to create pages with the effects discussed here is to work almost entirely in the user-friendly interface of your html code editor and then make the necessary small changes in the html code using your editor's ability to edit the html code directly.