DHTML stands for Dynamic HTML. Dynamic means things can change - move, disappear, react to mouse-clicks, etc.
Each object (picture, text-box, etc) gets an ID (name).
Then Java-Script commands can change the objects.
Normally wriiting the Java-Script commands is tricky and difficult. To make this simpler, we use a library - a collection of pre-written Java-Script commands so we needn't write everything "from scratch". Keep in mind that many of the commands in the library are non-standard - they won't work everywhere.
Pumpkin Sample
The sample page at the left is a puzzle - you must figure out how to save the pumpkin. You can move the pumpkin by clicking on it, then dragging it (but with the mouse button UP), then clicking it into place. Try to find a safe place for the poor pumpkin.
Once you have figured out how to save the pumpkin, find answers to these questions:
(1) What happens if you click on the computer?
(2) What else is clickable, besides the pumpkin and computer?
(3) What else changes when you save the pumpkin?
How to Make This Page
The picture at right shows the invisible boxes used in the page.
The boxes on the computer, head, and chain-saw are images. They each contain a transparent .gif image named clear.gif. There are 3 text-boxes (one hidden behind the Hee-hee box.)
The pumpkin is a .gif image with a tranparent area around it.
The red box conains one image of Garfield and the computer.
You need to open properties and change the borders to 0
to make the transparent images work correctly.
EzAction Script Library
The Script box contains a copy of the EzAction library.
(You can click on the link to download (or copy) this library.)
Then copy the entire library into a Script box.
Don't change any of the commands - it breaks easily!
Making the Boxes
Use the obvious tools
for making the boxes.
When using DHTML, each
box needs an ID (a name).
Add the ID by right-clicking,
choose [Object HTML],
and click [Inside Tag].
Be careful to use a different
name for each box
Ready - Cameras - ACTION!
Actions are created by JavaScript commands. In the pumpkin
page, all the commands are written into the Object HTML in various objects (boxes). This is tricky, so we'll start slowly.
Computer Hint
The invisible computer box uses an alert command to
pop-up a hint for the user. To make this happen when
the user clicks the box, the command starts with onclick.
You will need all the punctuation marks as shown -
"quotes", 'apostrophes', = and ;
Drag and Drop
The pumpkin is movable because of drag command.
This is also activated by onclick.
Walking Around
The chainsaw responds to clicks
by sending the pumpkin for
a walk around the screen.
The pumpkin follows the path specified in the list of numbers.
For each corner in the path there are 3 numbers.
The first number tells how long the pumpkin takes to reach the corner. The next two numbers are the x and y coordinates of the corner.
To make sure the pumpkin lands in the correct spot, the last coordinates
are equal to the left and top (x and y) coordinates of the garhead box.
Fading
When the pumpkin reaches the safe spot (garhead), the "Hee hee" text fades away. This is done by the fade command. But it must be entered in the pumpkin's commands, not in the text-box that fades out.
Drop - finishing Drag
The fading text is started by the ondrop command in the pumpkin object.
We use the near command to check if pumpkin is close to garhead.
There is also a bit more to it. If the pumpkin is not close to garhead,
then it jumps back to it's starting position under the chainsaw,
and the laugh text must become opaque (visible) again.
This is all pretty complex, as shown at the right.
The teacher will explain this all in greater detail.
