">
Domain Registration : Discount Domain Pricing : Website and Domain Hosting : Frontpage 2000 Hosting : Website Development and Promotion : Secure E-Commerce : Shopping Cart Software : Linux and Windows NT : Graphic Design : Free Email Services : Fast Servers : Low Cost!


RESOURCES




DHTML in IE 4

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, a 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 background 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.













Copyright © 1995-2003 Sidetrips™ Internet Services, Inc. All rights reserved.

Reproduction in whole or in part in any form or medium without express
written permission of Sidetrips Internet Services, Inc. is prohibited.

sidetrips.com™, hostserver.com™, registera.com™, htmlshop.com™,
and associated domains are trademarks of Sidetrips™ Internet Service, Inc.

Privacy Policy | Acceptable Use Policy | Terms of Service