DHTML in Internet ExplorerWe have realized that there's a
lot more in IE than its in 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 Internet Explorer
HTML elements in Internet Explorer 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 we changed the text's color:
sometext.style.color='red'
We first used the element's id to gain access to it, then, through the style object and
finally the style's color property, we were 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="soft.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>
