DHTML

DHTML stands for "Dynamic HTML." It means HTML that can be changed on the fly. Things can change positions, appear or disappear, and more. For our purposes, it refers to a new tag, called the "div" tag, which has some special properties that can give us tremendous amounts of control over our webpage layout. At first, we will use it for layout purposes, but later in this document we will show how to make changes to the attributes of the div tag to let the user change where things are on the page.

The tag does not have an immediate effect on the page. It is a block element (as opposed to an inline one), but other than causing a line break, it does not do anything else by itself. In many regards, it is like block element version of the tag. However, when used in conjunction with CSS, it can be very powerful, indeed.

When we create a ... tag around some text or other HTML code, we will want to use the "id" attribute of the tag. The id is a name for a given tag - it should be unique on the page, to avoid confusion with other s, it should start with a letter, and it should include no punctuation or spaces, except possibly the underscore character. It is case sensitive. For example: code format="html4strict" Here is some sample text. code By itself, this would just look like: "Here is some sample text." However, by creating a CSS command for the id, we can do much more. If you were to put the following into the section of the : code format="css" left: 100px; top: 100px; } code ... this would tell the computer to effectively put the "Here is some sample text" code onto a sheet of cellophane and arrange it so that the upper-left corner was at (100,100) from the upper left corner of the screen. In other words, the contents of the tag will float at the position we specify. If there is already some text or a graphic there, the 's tag will float on top of it. (By default, the background of the div is clear, so we may find that it looks all jumbled.)
 * 1) sample1 { position: absolute;

The position CSS attribute is what defines how the layer is located on the screen. Another popular option is "position: relative" - which would put the layer at 100,100 pixels away from where it normally would have appeared. (This often gets used for things like collapsing menus on webpages.)

Once you have a working layer, there are a lot of neat effects you can do, including changing the width of the layer, changing the background color, providing borders to the div, and more. I refer you to the CSS section of Coda for more ideas to try!

One other CSS attribute to play with is the "visibility" attribute - it has two possible values: "visible" and "hidden." At first, this may not sound very worthwhile - why create a section of the page that is invisible? But as we will see shortly, it can be very handy.

Becoming dynamic
When we mix the attributes of a tag with the onmouseover, onmouseout, and onclick attributes of a linking tag, we can get something much more powerful.

Within the onmouseover code in an  tag, we can use the following syntax: document.getElementById('//name_of_div//').style.//attribute// = //value// where the "name_of_div" is the ID of the tag we gave to the, and the "attribute = value" refers to setting the CSS attribute to a specific value.

Consider the "sample1" div we created earlier. If we wanted to, we could create a link that said "hide layer" which would make that div disappear: code format="html4strict" Hide layer code Here is another  tag, which would cause our sample1 layer to move: code format="html4strict" Move layer code As with the rollovers, it is also possible to make one mouseover perform two actions, such as making a div appear at a certain location: code format="html4strict" Make layer appear at (0,300). code There is a lot of fun stuff to be done with this. As you can see, though, these rollover attributes are starting to get very complicated. In the next section, we will talk about how you can write functions for oft-repeated rollover behaviors.