DHTML Tutorial DHTML is the art of making HTML pages dynamic! DHTML is a combination of technologies used to create dynamic and interactive Web sites. To most people DHTML means a combination of HTML, Style Sheets and JavaScript. Start learning DHTML now! DHTML Tutorial DHTML HOME DHTML Intro DHTML CSS DHTML DOM DHTML Events DHTML Summary DHTML DOM DOM Reference DHTML Examples DHTML Examples DOM Examples

What you should already know Before you continue you should have a basic understanding of the following: • • •

HTML CSS JavaScript

If you want to study these subjects first, find the tutorials on our Home Page.

DHTML is NOT a W3C Standard DHTML stands for Dynamic HTML. DHTML is not a standard defined by the World Wide Web Consortium (W3C). DHTML is a "marketing term" - used by Netscape and Microsoft to describe the new technologies the 4.x generation browsers would support.

DHTML is a combination of technologies used to create dynamic Web sites. To most people DHTML means a combination of HTML 4.0, Style Sheets and JavaScript. W3C once said: "Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated."

DHTML Technologies With DHTML a Web developer can control how to display and position HTML elements in a browser window.

HTML 4.0 With HTML 4.0 all formatting can be moved out of the HTML document and into a separate style sheet. Because HTML 4.0 separates the presentation of the document from its structure, we have total control of presentation layout without messing up the document content.

Cascading Style Sheets (CSS) With CSS we have a style and layout model for HTML documents. CSS was a breakthrough in Web design because it allowed developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Web are updated automatically.

The Document Object Model (DOM) DOM stands for the Document Object Model. The HTML DOM is the Document Object Model for HTML. The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML objects. "The W3C Document Object Model (DOM) is a platform and language neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document".

JavaScript Allows you to write code to control all HTML elements.

DHTML Technologies in Netscape 4.x and Internet Explorer 4.x Netscape 4.x Cross-Browser DHTML Internet Explorer 4.x • JSS (JavaScript Style • CSS1 • Visual Filters (allow Sheets) (allows you to • CSS2 (allows you to you to apply visual control how different effects to text and control how different HTML elements will graphics) HTML elements will be displayed) be displayed) • Dynamic CSS (allows • CSS Positioning • Layers (allows you to you to control element (allows you to control control element positioning and element positioning positioning and visibility) and visibility) visibility) • JavaScript Note: Problems with coding DHTML technologies WILL occur as long as each browser creates its own proprietary features and technology that is not supported by other browsers. A Web page may look great in one browser and horrible in another.

CSS is used to style HTML elements.

Examples Note: Most of the DHTML examples require IE 4.0+, Netscape 7+, or Opera 7+! position:relative How to position an element relative to its normal position. position:relative How to position all headings relative to their normal position. position:absolute How to position an element using an absolute value. (You can find more examples at the bottom of this page)

Which Attributes can be Used with CSS-P? First, the element must specify the position attribute (relative or absolute). Then we can set the following CSS-P attributes: • • • • • •

left - the element's left position top - the element's top position visibility - specifies whether an element should be visible or hidden z-index - the element's stack order clip - element clipping overflow - how overflow contents are handled

Position The CSS position property allows you to control the positioning of an element in a document.

position:relative The position:relative property positions an element relative to its current position. The following example positions the div element 10 pixels to the right from where it's normally positioned: div { position:relative; left:10; }

position:absolute The position:absolute property positions an element from the margins of the window. The following example positions the div element 10 pixels to the right from the leftmargin of the the window: div { position:absolute; left:10; }

Visibility The visibility property determines if an element is visible or not.

visibility:visible The visibility:visible property makes the element visible. h1 { visibility:visible; }

visibility:hidden The visibility:hidden property makes the element invisible. h1 { visibility:hidden; }

Z-index The z-index property is used to place an element "behind" another element. Default zindex is 0. The higher number the higher priority. z-index: -1 has lower priority. h1 { z-index:1; } h2 { z-index:2; }

In the example above, if the h1 and h2 elements are positioned on top of each other, the h2 element will be positioned on top of the h1 element.

Filters The filter property allows you to add more style effects to your text and images. h1

{ width:100%; filter:glow; }

Note: Always specify the width of the element if you want to use the filter property. The example above produces this output:

Header Different Filters Note: Some of the Filter properties will not work unless the background-color property is set to transparent! Property alpha

blur

chroma fliph flipv glow gray invert

mask

Argument Description Example opacity Allows you to set the opacity filter:alpha(opacity=20, finishopacity of the element finishopacity=100, style=1, style startx=0, startx starty=0, finishx=140, starty finishy=270) finishx finishy add Makes the element blur filter:blur(add=true, direction=90, direction strength=6); strength color Makes the specified color filter:chroma(color=#ff0000) transparent none Flips the element filter:fliph; horizontally none Flips the element vertically filter:flipv; color Makes the element glow filter:glow(color=#ff0000, strength strength=5); none Renders the element in black filter:gray; and white none Renders the element in its filter:invert; reverse color and brightness values color Renders the element with the filter:mask(color=#ff0000); specified background color, and transparent foreground

shadow

color Renders the element with a shadow Renders the element with a dropshadow

color filter:shadow(color=#ff0000, direction direction=90); dropshadow color filter:dropshadow(color=#ff0000, offx offx=5, offy=5, positive=true); offy positive wave add Renders the element like a filter:wave(add=true, freq=1, freq wave lightstrength=3, phase=0, lightstrength strength=5) phase strength xray none Renders the element in black filter:xray; and white with reverse color and brightness values

Background The background property allows you to select your own background.

background-attachment:scroll The background scrolls along with the rest of the page.

background-attachment:fixed The background does not move when the rest of the page scrolls.

More Examples Visibility How to make an element invisible. Do you want the element to show or not? Z-index Z-index can be used to place an element "behind" another element, using Z-index priority. Z-index Check that the elements now have changed their Z-index priority.

Cursors Change the style of the mouse cursor with CSS. Filters Change the style of your headings using the filter property. Filters on Images The filter property can also be used on images, here are some filter examples which look good on images. Watermark A background picture that does not move when the rest of the page is scrolling.

The Document Object Model gives us access to every element in a document.

Examples Note: Most of the DHTML examples require IE 4.0+, Netscape 7+, or Opera 7+! Element access How to access an element and change the style. Attribute change How to access an image element and change the "src" attribute. innerHTML How to access and change the innerHTML of an element.

How to access an element? The element must have an id attribute defined and a scripting language is needed. JavaScript is the most browser compatible scripting language, so we use JavaScript.

My header

<script type="text/javascript"> document.getElementById('header').style.color="red"

The script changes the color of the header element, and produces this output.

My header With an event handler you can do something with an element when an event occurs.

Examples Note: Most of the DHTML examples require IE 4.0+, Netscape 7+, or Opera 7+! onmouseover & onmouseout How to change the color of an element when the cursor moves over and out of an element. onclick Turn on the light! How you can change an image when you click on it, and back to the original image when you click on it again. onmousedown & onmouseup This time the light is on only when you hold the mouse button down. onload Displays an alert box when the page has finished loading.

Event handlers With an event handler you can do something with an element when an event occurs: when the user clicks an element, when the page loads, when a form is submitted, etc.

Click on this text

The example above defines a header that turns red when a user clicks on it. You can also add a script in the head section of the page and then call the function from the event handler: <script type="text/javascript"> function changecolor() { document.getElementById('header').style.color="red" }

Click on this text

HTML 4.0 Event Handlers Event onabort onblur onchange onclick ondblclick onfocus onkeydown onkeypress onkeyup onload onmousedown onmousemove onmouseover onmouseout onmouseup onreset onselect onsubmit onunload

Occurs when... a user aborts page loading a user leaves an object a user changes the value of an object a user clicks on an object a user double-clicks on an object a user makes an object active a keyboard key is on its way down a keyboard key is pressed a keyboard key is released a page is finished loading. Note: In Netscape this event occurs during the loading of a page! a user presses a mouse-button a cursor moves on an object a cursor moves over an object a cursor moves off an object a user releases a mouse-button a user resets a form a user selects content on a page a user submits a form a user closes a page

DHTML Summary This tutorial has taught you how to use DHTML to create more dynamic and interactive Web sites. You have learned how to use the combination of HTML, CSS and JavaScript to animate HTML documents.

For more information on DHTML, please look at our DHTML examples and our DHTML reference.

Now You Know DHTML, What's Next? The next step is to learn about the HTML DOM and ASP. HTML DOM The HTML DOM defines a standard way for accessing and manipulating HTML documents. The HTML DOM is platform and language independent and can be used by any programming language like Java, JavaScript, and VBScript. If you want to learn more about the DOM, please visit our HTML DOM tutorial. ASP While scripts in an HTML file are executed on the client (in the browser), scripts in an ASP file are executed on the server. With ASP you can dynamically edit, change or add any content of a Web page, respond to data submitted from HTML forms, access any data or databases and return the results to a browser, customize a Web page to make it more useful for individual users. Since ASP files are returned as plain HTML, they can be viewed in any browser. If you want to learn more about ASP, please visit our ASP tutorial.

With JavaScript you can access and manipulate all of the HTML DOM objects.

HTML DOM Objects The HTML DOM is a W3C standard and it is an abbreviation for the Document Object Model for HTML. The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documents.

All HTML elements, along with their containing text and attributes, can be accessed through the DOM. The contents can be modified or deleted, and new elements can be created. The HTML DOM is platform and language independent. It can be used by any programming language like Java, JavaScript, and VBScript. Follow the links below to learn more about how to access and manipulate each DOM object with JavaScript: Object Anchor Applet Area Base Basefont Body Button

Checkbox

Document Event

FileUpload Form Frame Frameset Hidden

History

Description Represents an HTML a element (a hyperlink) Represents an HTML applet element. The applet element is used to place executable content on a page Represents an area of an image-map. An image-map is an image with clickable regions Represents an HTML base element Represents an HTML basefont element Represents the body of the document (the HTML body) Represents a push button on an HTML form. For each instance of an HTML tag on an HTML form, a Button object is created Represents a checkbox on an HTML form. For each instance of an HTML tag on an HTML form, a Checkbox object is created Used to access all elements in a page Represents the state of an event, such as the element in which the event occurred, the state of the keyboard keys, the location of the mouse, and the state of the mouse buttons For each instance of an HTML tag on a form, a FileUpload object is created Forms are used to prompt users for input. Represents an HTML form element Represents an HTML frame Represents an HTML frameset Represents a hidden field on an HTML form. For each instance of an HTML tag on a form, a Hidden object is created A predefined object which can be accessed through the history property of the Window object. This object consists of an array of URLs. These URLs are all the URLs the user has visited within a

Iframe Image Link Location Meta Navigator Option

Password

Radio

Reset

Screen Select Style

Submit

Table TableData TableHeader TableRow Text Textarea Window

browser window Represents an HTML inline-frame Represents an HTML img element Represents an HTML link element. The link element can only be used within the tag Contains information about the current URL Represents an HTML meta element Contains information about the client browser Represents an option in a selection list on an HTML form. For each instance of an HTML tag in a selection list on a form, an Option object is created Represents a password field on an HTML form. For each instance of an HTML tag on a form, a Password object is created Represents radio buttons on an HTML form. For each instance of an HTML tag on a form, a Radio object is created Represents a reset button on an HTML form. For each instance of an HTML tag on a form, a Reset object is created Automatically created by the JavaScript runtime engine and it contains information about the client's display screen Represents a selection list on an HTML form. For each instance of an HTML <select> tag on a form, a Select object is created Represents an individual style statement. This object can be accessed from the document or from the elements to which that style is applied Represents a submit button on an HTML form. For each instance of an HTML tag on a form, a Submit object is created Represents an HTML table element Represents an HTML td element Represents an HTML th element Represents an HTML tr element Represents a text field on an HTML form. For each instance of an HTML tag on a form, a Text object is created Represents an HTML textarea element Corresponds to the browser window. A Window object is created automatically with every instance of a or tag

Note: Most of the examples require IE 4.0+, Netscape 7+, Mozilla, Firefox 1.0, or Opera 7+!

CSS Position:relative Position:relative Position:absolute Visibility Z-index Z-index Vice Versa Cursors Watermark Change background color

CSS Filter Property (IE only) Filters Filters on Images Filter:mask image Filter:mask text Filter light effect Filter moving light effect Glowing header Drop shadow header From black and white to color Gradually show image Negative image XRay image The mask filter Glowing link Drop shadow link Wave link Shadow link Alpha image link Gray image link

Events onload onunload onchange onsubmit onreset onselect onblur

onfocus onkeydown onkeyup onkeydown vs onkeyup onkeypress onmouseover & onmouseout onclick ondblclick onmousedown & onmouseup onmousemove Disable right-click IE only

Text Element access Attribute change innerHTML access Change innerHTML Change position onmousemove onload & onunload Tooltip Typewrite message Bigger text Scrolling text Blinking header

Input Forms Identical forms Identical forms 2 Change background color of an input field Change text color of an input field Insert background image to an input field Change background color of a radio button IE and Opera only Insert background image to a radio button IE and Opera only Select all check-boxes Change background color of a checkbox Opera only Insert background image to a checkbox IE and Opera only Change background color of a button Change text color of a button Insert background image to a button Change background color of a drop-down list Change text color of a drop-down list Change background color of a textarea

Change text color of a textarea Insert background image to a textarea

Images Preload image Change the size of an image Change the source of an image Change the size & the source of an image Change the position of an image Change the background image Moving image Drag and drop the image IE and Opera only Image viewer A button with a background image IE and Opera only Shaking image Digital clock

Window Shake the window

Links Text transform Letter spacing Blinking link Shaking link Random Banner

Menus Top navigation IE only Left navigation IE and Opera only Drop down navigation (select box) Top drop down IE and Opera only Always-on-top IE and Opera only Inset borders IE and Opera only Description menu Description image Cursor description IE and Opera only Cursor image IE and Opera only Gray/Color image menu IE only Sliding Vertically IE and Opera only Click sliding Vertically IE and Opera only

Sliding horizontal Click sliding horizontal

Cursor Cursor position IE only Cursor text IE only Cursor image IE only Easy cursor trail IE only

Page-enter Effects (IE only) Fade in Square in Square out Circle in Circle out Curtain up Curtain down Curtain right Curtain left Vertical blinds Horizontal blinds Boxy vertical blinds Boxy horizontal blinds Pulverized Elevator close Elevator open Elevator horizontal close Elevator horizontal open Diagonal top right Diagonal bottom right Diagonal top left Diagonal bottom left Horizontal lines Vertical lines Random

Anchor Object Change text, URL, and target attribute of a link Using focus() and blur() Add an accessKey to a link

Document Object Write text to the output Write text with formatting to the output Return the title of a document Return the URL of a document Return the referrer of a document Return the domain name of the document's server Use getElementById() Use getElementsByName() Open a new document, specify MIME type and add some text Return the number of anchors in a document Return the innerHTML of the first anchor in a document Count the number of forms in a document Access an item in a collection Count the number of images in a document

Event Object Which mouse button was clicked? What are the coordinates of the cursor? What is the unicode of the key pressed? What are the coordinates of the cursor, relative to the screen? What are the coordinates of the cursor? Was the shift key pressed? Which element was clicked? Which eventype occured?

Form and Form Input Objects View and change the action URL of a form View the method that is to be used when sending form data Alert id, type, and value of a Button object + disable button Check and uncheck a checkbox Checkboxes in a form Checkbox - If the user clicks in a checkbox, the content of the text fields are converted to uppercase. Radio buttons Reset a form Submit a form Form validation Set focus to an input field when the page loads Select the content of an input field Dropdown list in a form Another dropdown list

A dropdown menu Jump to the next field when the current field's maxlength has been reached Add accessKeys to form fields

Frame, Frameset, and IFrame Objects Resizable and not resizable frames Frames with and without scrollbars Change the source / URL of two frames Break out of a frame Update two iframes

Image Object Change the height and width of an image Change the src of an image

Location Object Send the client to a new location / URL Reload a page Break out of a frame Anchors array - This example opens two windows. The first window contains four buttons and the second window defines four anchors from 0 to 3. When a button is clicked in the first window, the onclick event handler goes to the specified anchor in the second window.

Navigator Object Detect the visitor's browser and browser version More details about the visitor's browser All details about the visitor's browser Alert user, depending on browser

Option and Select Objects Disable and enable a dropdown list Get the id of the form that contains the dropdown list Get the number of options in the dropdown list Turn the dropdown list into a multiline list Select multiple options in a dropdown list Alert the selected option in a dropdown list Alert the index of the selected option in a dropdown list

Change the text of the selected option Remove options from a dropdown list

Screen Object Detect details about the client's screen

Table, TableHeader, TableRow, TableData Objects Change the width of a table border Change the cellPadding and cellSpacing of a table Specify frames of a table Specify rules for a table InnerHTML of a row InnerHTML of a cell Create a caption for a table Delete rows in a table Add rows to a table Add cells to a table row Align the cell content in a table row Vertical align the cell content in a table row Align the cell content in a single cell Vertical align the cell content in a single cell Change the content of a table cell Change the colspan of a table row

Window Object Display an alert box Alert box with line-breaks Display a confirm box Display a prompt box Open a new window when clicking on a button Open a new window and control its appearance Open multiple windows with one click Send the client to a new location / URL Reload a page Write some text in the windows status bar Print a page Break out of a frame Resize a window Resize a window to a specified size Scroll the window Scroll the window to a specified position Simple timing

Another simple timing Timing event in an infinite loop Timing event in an infinite loop - with a Stop button A clock created with a timing event Create a pop-up