Académique Documents
Professionnel Documents
Culture Documents
DHTML Tutorial
DHTML is the art of making HTML pages dynamic!
At W3Schools you will find a complete DHTML DOM reference of all the DOM objects, along with
their properties and methods.
DHTML Examples
Learn by 100 examples! With our editor, you can edit the source code, and click on a test button to
view the result.
DHTML Examples
DHTML DOM Examples
Introduction to DHTML
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.
1
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.
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.
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 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
2
JSS (JavaScript Style CSS1 Visual Filters (allow you
Sheets) (allows you to CSS2 (allows you to to apply visual effects to
control how different control how different text and graphics)
HTML elements will be HTML elements will be Dynamic CSS (allows
displayed) displayed) you to control element
Layers (allows you to CSS Positioning (allows positioning and visibility)
control element you to control element
positioning and positioning 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.
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.
First, the element must specify the position attribute (relative or absolute).
3
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 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 left-margin of its
containing block:
div
{
position:absolute;
left:10;
}
Visibility
visibility:visible
h1
{
visibility:visible;
}
visibility:hidden
4
h1
{
visibility:hidden;
}
Z-index
The z-index property is used to place an element "behind" another element. Default z-index 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.
Header
Different Filters
Note: Some of the Filter properties will not work unless the background-color property is set to
transparent!
5
finishy
blur add Makes the element blur filter:blur(add=true,
direction direction=90, strength=6);
strength
chroma color Makes the specified color transparent filter:chroma(color=#ff0000)
fliph none Flips the element horizontally filter:fliph;
flipv none Flips the element vertically filter:flipv;
glow color Makes the element glow filter:glow(color=#ff0000,
strength strength=5);
gray none Renders the element in black and white filter:gray;
invert none Renders the element in its reverse color filter:invert;
and brightness values
mask color Renders the element with the specified filter:mask(color=#ff0000);
background color, and transparent
foreground color
shadow color Renders the element with a shadow filter:shadow(color=#ff0000,
direction direction=90);
dropshado color Renders the element with a dropshadow filter:dropshadow(color=#ff0000
w offx , offx=5, offy=5, positive=true);
offy
positive
wave add Renders the element like a wave filter:wave(add=true, freq=1,
freq lightstrength=3, phase=0,
lightstrengt strength=5)
h
phase
strength
xray none Renders the element in black and white filter:xray;
with reverse color and brightness values
Background
background-attachment:scroll
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.
6
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.
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.
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.
<html>
<body>
<h1 id="header">My header</h1>
<script type="text/javascript">
document.getElementById('header').style.color="red";
</script>
</body>
</html>
The script changes the color of the header element, and produces this output.
7
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+!
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.
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.
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:
<html>
<head>
<script type="text/javascript">
function changecolor()
{
document.getElementById('header').style.color="red";
}
</script>
</head>
8
<body>
<h1 id="header" onclick="changecolor()">
Click on this text</h1>
</body>
</html>
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.
The next step is to learn about the HTML DOM and ASP.
9
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.
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 Description
Anchor Represents an HTML a element (a hyperlink)
Applet Represents an HTML applet element. The applet element is used to place
executable content on a page
10
Area Represents an area of an image-map. An image-map is an image with
clickable regions
Base Represents an HTML base element
Basefont Represents an HTML basefont element
Body Represents the body of the document (the HTML body)
Button Represents a push button on an HTML form. For each instance of an HTML
<input type="button"> tag on an HTML form, a Button object is created
Checkbox Represents a checkbox on an HTML form. For each instance of an HTML
<input type="checkbox"> tag on an HTML form, a Checkbox object is
created
Document Used to access all elements in a page
Event 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
FileUpload For each instance of an HTML <input type="file"> tag on a form, a
FileUpload object is created
Form Forms are used to prompt users for input. Represents an HTML form
element
Frame Represents an HTML frame
Frameset Represents an HTML frameset
Hidden Represents a hidden field on an HTML form. For each instance of an HTML
<input type="hidden"> tag on a form, a Hidden object is created
History 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 browser window
Iframe Represents an HTML inline-frame
Image Represents an HTML img element
Link Represents an HTML link element. The link element can only be used
within the <head> tag
Location Contains information about the current URL
Meta Represents an HTML meta element
Navigator Contains information about the client browser
Option Represents an option in a selection list on an HTML form. For each
instance of an HTML <option> tag in a selection list on a form, an Option
object is created
Password Represents a password field on an HTML form. For each instance of an
HTML <input type="password"> tag on a form, a Password object is
created
Radio Represents radio buttons on an HTML form. For each instance of an HTML
<input type="radio"> tag on a form, a Radio object is created
Reset Represents a reset button on an HTML form. For each instance of an HTML
<input type="reset"> tag on a form, a Reset object is created
Screen Automatically created by the JavaScript runtime engine and it contains
information about the client's display screen
Select Represents a selection list on an HTML form. For each instance of an HTML
<select> tag on a form, a Select object is created
Style Represents an individual style statement. This object can be accessed
from the document or from the elements to which that style is applied
Submit Represents a submit button on an HTML form. For each instance of an
HTML <input type="submit"> tag on a form, a Submit object is created
Table Represents an HTML table element
TableData Represents an HTML td element
TableHeader Represents an HTML th element
TableRow Represents an HTML tr element
Text Represents a text field on an HTML form. For each instance of an HTML
<input type="text"> tag on a form, a Text object is created
Textarea Represents an HTML textarea element
11
Window Corresponds to the browser window. A Window object is created
automatically with every instance of a <body> or <frameset> tag
DHTML Examples
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
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
12
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 IE7 and 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
13
Window
Links
Text transform
Letter spacing
Blinking link
Shaking link
Random Banner
Menus
Cursor
Cursor position
Cursor text
Cursor image
Cursor trail 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
14
Diagonal bottom right
Diagonal top left
Diagonal bottom left
Horizontal lines
Vertical lines
Random
Anchor Object
Document Object
Event Object
15
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
Image Object
Location Object
Navigator Object
Screen Object
16
Table, TableHeader, TableRow, TableData Objects
Window Object
17