|
Basic DHTML for Netscape Navigator: The Script
The Script
Script, the dynamic, power sludge engine behind DHTML.
JavaScript is
a language similar to the Java language. For information about JavaScript go to
our JavaScript tutorial.
Just like HTML gave us the raw materials for DHTML,
and layer attributes gave us the nails and paint, script gives us the power tools needed to
bring everything together. Each HTML element can be accessed through script by
what is called a document object model or (DOM).
Now lets say we wanted the text to move up or down
as a result of a mouse click over one of the up or down sword images. Script is
how we make this happen. Below is a diagram of how the script would relate to
our DHTML page.
Each DHTML block is accessible through script. The various attributes of each DHTML
element can be edited on the fly through script.
For the page to do what we want it to do, we
must assign some events, namely the onClick event, to an anchor tag
within the up and down control's <layer> tags. For information
about JavaScript events, go to the JavaScript Tutorial Event
Listing. Below is what the code would look like with the parts pertaining
to script in red.
- <!-- -------------CONTROL BLOCK------------- -->
-
- <layer id="controls"
- top="100"
- left="700"
- width="50"
- height="300"
- Z-Index="1"
- visibility="show">
-
- <layer id="scrollup"
- top="0"
- left="0">
- <a href="#" onClick="scrollUp()">
- <img src="up.gif" alt="Scroll Up" border="0">
- </a></layer>
-
- <layer id="scrolldown"
- top="200"
- left="0">
- <a href="#" onclick="scrollDown()">
- <img src="down.gif" alt="Scroll Down" border="0">
- </a></layer>
-
- </layer>
First look at the id attribute. These are the names
we use to refer to the <layer> groups in the script. It's the element's
identification basically. We then assigned a function to be called upon result of an onClick
event to each sword element. The scrollUp() and scrollDown()
functions then increment or decrement the text element's top value. But how do we access
the DHTML element's attributes? Easily, through the use of the DOM. Every <layer>
tag can be access using the structure,
document.ID.attribute/method(). Below is an example of the scrollup() function
<script language="javascript">
<!--
function scrollUp()
{
var top = document.story.top;
document.story.moveTo(200,top - 100);
}
//-->
</script>
In the scrollUp() function we get the current
value of the text block's top attribute and decrement it by 100 pixels and move the layer
using the moveTo() method of the layer object. We can access
any attribute or method of the <layer> block through JavaScript.
By controlling the attributes (top, left, background-color, etc)
of each <layer> tag, we make our web pages dynamic and controllable through
scripting. Below is a table of <layer> methods.
| <layer> Tag Methods |
| Method |
Syntax |
Description |
| moveBy() |
layer.moveBy(x_pixels,y_pixels) |
Moves the layer x_pixels left and right, and y_pixels up and down. |
| moveTo() |
layer.moveTo(x_coordinate,y_coordinate) |
Moves the layer to the x,y coordinates specified, starting from the upper-left corner. |
| resizeBy() |
layer.resizeBy(x_pixels,y_pixels) |
Resizes the layer by x_pixels horizontally and y_pixels vertically. |
| resizeTo() |
layer.resizeTo(x_coordinate,y_coordinate) |
Resizes the layer to the x,y coordinates specified, starting from the upper-left corner. |
| moveAbove() |
layer.moveAbove(layer) |
Moves the layer above the layer specified. |
| moveBelow() |
layer.moveBelow(layer) |
Moves the layer below the layer specified. |
| load() |
layer.load(file,width) |
Loads file into the layer and sets the width of the layer. |
There are ton of things you can do with DHTML in Netscape Navigator.
Only through actual hands-on experimentation will you fully understand and appreciate
DHTML. So get out your editors and browsers, log on to HTMLStuff and learn the ways of
DHTML.
Basic DHTML with Netscape Navigator
Part 1: The HTML
Part 2: The Attributes
Part 3: The Script
Related Articles: Introduction to DHTML
Related Articles: Basic DHTML with Internet Explorer
Have a comment or question dealing with this tutorial? Write us!
Back to Tutorial Menu
Back to Designer Main Page
Back To HTML Stuff Main Page
|
Copyright © 2000 Tucows.Com Inc.
TUCOWS.Com Inc. has no liability for any content or goods on the TUCOWS site or the Internet, except as set forth in the terms and conditions and privacy statem
ent.
|
|
Upload
