438 Chapter 24 – Introduction to DHTMLDHTML Examples
Web Design in a Nutshell, eMatter EditionTo access a CSS object’sleft property, or X coordinate in Netscape 4.0 write:
document."style_name".left
To access thetop property, or Y coordinate, in Netscape 4.0 write:
document."style_name".top
As with the style change example, Netscape 4.0 and Internet Explorer 4.0 do not
agree on how JavaScript can accesstopand leftproperties. To change an
object’sleft property in Internet Explorer 4.0 write:
document.all."style_name".style.pixelLeft
And to change an object’stop property in Internet Explorer 4.0 write:
document.all."style_name".style.pixelTop
Be sure to enclose this code in browser detection code as described earlier.
To create the animated text, first, a Cascading Style Sheet creates an object called
animate, like this:
<STYLE TYPE="text/css">
#animate {position: absolute; left: -80; top: 10;}
</STYLE>
Theanimateobject’sleftattribute or X coordinate is set to -80. Itstopattribute
or Y coordinate is 10. These coordinates set theanimateobject 80 pixels to the
left of the browser window, which is out of sight, and 10 pixels down from the
top of the browser.
Now that theanimateobject is defined, it can be placed into an HTML document
using the<span>or<div>tag. The body of the example HTML document looks
like this:
<BODY onload="counter = setInterval('motion()', 20)">
<DIV ID="animate">Moving text</DIV>
</BODY>
The<body>tag contains anonloadaction event, which triggers functions in the
following JavaScript.
The JavaScript will increase theanimateobject’sleftattribute incrementally
making any image or text designated asanimateby a<span>tag appear to move
onto the browser from the left to the right.
<SCRIPT LANGUAGE="Javascript1.2">var isNet4, isIE4
// Variables that you can reference for browser type.
//
// Begin the browser detection script.
if ( navigator.appVersion.substring(0, 1) >= 4)
{
if ( navigator.appName == "Netscape" )
{
isNet4 = true;
}