As I began taking on and learning IE 4's implementation of DHTML, and
realized that there's a lot more to it than its NS counterpart. DHTML in
IE does not rely on any one tag, but rather, new objects and properties
that stem out of the usual HTML tags you're used to working with, such
as <div> and <table>. It's a lot more powerful, but at the same time,
and lot more complicated to grasp.
-The style object of IE 4
HTML elements in IE 4 now all support a style object, which is essentially
the "dynamic" object used to manipulate the look and "feel" of that element.
Like the <layer> tag, elements can also be assigned an "id" attribute,
which can then be used to identify it during scripting. For example:
<div id="adiv"></div>
In your script, the syntax required to access the style object of "adiv"
would look like this:
adiv.style
The style object contains many properties, and by manipulating these
properties, you can alter the look of an element, dynamically. I'll show
some of these properties now:
Important properties of the style
object
| backgroundColor |
The backgound color of the element |
| backgroundImage |
The background image of the element |
| color |
The color of the element |
| position |
The position type of the element. Accepted
values are "absolute" and relative" |
| pixelWidth |
The width of the element |
| pixelHeight |
The height of the element |
| pixelLeft |
The position of the element in relation to
the x coordinates |
| pixelTop |
The position of the element in relation to
the y coordinates |
The properties above only represent a subset of the total supported
properties, but are the most commonly used ones. The basic syntax to manipulating
any style property is the same, which I'll show in a minute. By accessing
these properties, we can change the look and style of most HTML elements
(as opposed to just the <layer> tag in Netscape)!
Here's a simple demonstration. The below text changes color when the
mouse moves over it:
Move
your mouse here
Here's the source code to the above text:
<span id="sometext" onMouseover="sometext.style.color='red'"
onMouseout="sometext.style.color='black'">Move
your mouse here</span>
Notice how I changed the text's color:
sometext.style.color='red'
I first used the element's id to gain access to it, then, through the
style object and finally the style's color property, I was able to easily
change the color of the text on demand!
All style properties are read/write, and are accessed in a similar manner:
element id->style object->property name.
Hers's another example that expands an image when the mouse is over
it, and reverts it back to its original size when the mouse moves out:
<img id="aimage" src="piza.gif"
onMouseover="enlarge()" onMouseout="revertback()">
<script language="JavaScript1.2">
function enlarge(){
aimage.style.pixelWidth=164
aimage.style.pixelHeight=202
}
function revertback(){
aimage.style.pixelWidth=82
aimage.style.pixelHeight=101
}
</script>
Yes, I know its not exactly the most practical example in the world,
but it does illustrate DHTML at work quite well. The image changes dimensions
on demand, without the need to reload the document. That's something JavaScript
alone can never do.
-Tutorial
Introduction
-What
is DHTML?
-DHTML
in NS- The <layer> tag
-DHTML in IE 4
-Dynamic
Content
-Moving
elements around in the document
-Creating
cross-browser DHTML
-DHTML
resources
Discussion - Client Side Scripting
DHTML in IE 4