<?xml version="1.0" encoding="UTF-16"?>
<rss version="2.0"><channel><title>SoftXML | DHTML Tutorials</title><link>http://www.softxml.com/rss/tutorials/dhtml.xml</link><description>Tutorials</description><pubDate>Sun, 11 Jan 2009 14:27:50 EST</pubDate><language>en-us</language><image><title>SoftXML | DHTML Tutorials</title><url>http://www.softxml.com/images/rsscategory.gif</url><link>http://www.softxml.com/rss/tutorials/dhtml.xml</link><width>80</width><height>73</height></image><item><title>Introduction to DHTML</title><link>http://www.softxml.com/LearnTutorial.asp?id=46184132387&amp;f=dhtml&amp;fo=tutorials</link><description>&lt;H3&gt;What you should already know&lt;/H3&gt;
&lt;P&gt;Before you continue you should have a basic understanding of the 
following:&lt;/P&gt;
&lt;UL&gt;
&lt;LI&gt;WWW, HTML and the basics of building Web pages 
&lt;LI&gt;CSS 
&lt;LI&gt;JavaScript &lt;/LI&gt;&lt;/UL&gt;
&lt;P&gt;If you want to study these subjects first, find the tutorials on our &lt;A 
href="http://www.w3schools.com/default.asp" target=_top&gt;Home Page&lt;/A&gt;.&lt;/P&gt;
&lt;HR&gt;

&lt;H3&gt;DHTML is NOT a W3C Standard&lt;/H3&gt;
&lt;P&gt;DHTML stands for &lt;B&gt;D&lt;/B&gt;ynamic &lt;B&gt;HTML&lt;/B&gt;.&lt;/P&gt;
&lt;P&gt;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.&lt;/P&gt;
&lt;P&gt;DHTML is a combination of technologies used to create dynamic Web sites.&lt;/P&gt;
&lt;P&gt;To most people DHTML means a combination of HTML 4.0, Style Sheets and 
JavaScript. &lt;/P&gt;
&lt;P&gt;W3C once said: &lt;I&gt;"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."&lt;/I&gt; &lt;/P&gt;
&lt;HR&gt;

&lt;H3&gt;DHTML Technologies&lt;/H3&gt;
&lt;P&gt;With DHTML a Web developer can control how to display and position HTML 
elements in a browser window.&lt;/P&gt;
&lt;H3&gt;HTML 4.0&lt;/H3&gt;
&lt;P&gt;With HTML 4.0 all formatting can be moved out of the HTML document and into a 
separate &lt;B&gt;style sheet&lt;/B&gt;. 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.&lt;/P&gt;
&lt;H3&gt;Cascading Style Sheets (CSS)&lt;/H3&gt;
&lt;P&gt;With CSS we have a style and layout model for HTML documents.&lt;/P&gt;
&lt;P&gt;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.&lt;/P&gt;
&lt;H3&gt;The Document Object Model (DOM)&lt;/H3&gt;
&lt;P&gt;&lt;B&gt;DOM&lt;/B&gt; stands for the &lt;B&gt;D&lt;/B&gt;ocument &lt;B&gt;O&lt;/B&gt;bject &lt;B&gt;M&lt;/B&gt;odel.&lt;/P&gt;
&lt;P&gt;The HTML DOM is the Document Object Model for HTML.&lt;/P&gt;
&lt;P&gt;The HTML DOM defines a standard set of objects for HTML, and a standard way 
to access and manipulate HTML objects.&lt;/P&gt;
&lt;P&gt;&lt;I&gt;"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"&lt;/I&gt;.&lt;/P&gt;
&lt;H3&gt;JavaScript (and VBScript)&lt;/H3&gt;
&lt;P&gt;Allows you to write code to control all HTML elements.&lt;/P&gt;
&lt;HR&gt;

&lt;H3&gt;&lt;B&gt;DHTML technologies in Netscape 4.x and Internet Explorer 4.x:&lt;/B&gt;&lt;/H3&gt;
&lt;TABLE class=ex width="100%" border=1 ID="Table1"&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TH vAlign=top align=left width="33%"&gt;Netscape Navigator 4.x&lt;/TH&gt;
&lt;TH vAlign=top align=left width="33%"&gt;Cross-Browser DHTML&lt;/TH&gt;
&lt;TH vAlign=top align=left width="34%"&gt;Internet Explorer 4.</description><guid>http://www.softxml.com/LearnTutorial.asp?id=46184132387&amp;f=dhtml&amp;fo=tutorials</guid><category>dhtml</category></item><item><title>DHTML CSS Positioning (CSS-P)</title><link>http://www.softxml.com/LearnTutorial.asp?id=350116966&amp;f=dhtml&amp;fo=tutorials</link><description>&lt;P&gt;CSS is used to style HTML elements.&lt;/P&gt;
&lt;HR&gt;

&lt;H3&gt;Examples&lt;/H3&gt;
&lt;P style="COLOR: #0000ff"&gt;&lt;B&gt;Note:&lt;/B&gt; Most of the DHTML examples require IE 
4.0+, Netscape 7+, or Opera 7+!&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_position_relative" 
target=_blank&gt;position:relative&lt;/A&gt;&lt;BR&gt;How to position an element relative to 
its normal position.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_position_relativeall" 
target=_blank&gt;position:relative&lt;/A&gt;&lt;BR&gt;How to position all headings relative to 
their normal position.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_position_absolute" 
target=_blank&gt;position:absolute&lt;/A&gt;&lt;BR&gt;How to position an element using an 
absolute value.&lt;/P&gt;
&lt;P&gt;(You can find more examples at the bottom of this page)&lt;/P&gt;
&lt;HR&gt;

&lt;H3&gt;Which Attributes can be Used with CSS-P?&lt;/H3&gt;
&lt;P&gt;First, the element must specify the position attribute (relative or 
absolute).&lt;/P&gt;
&lt;P&gt;Then we can set the following CSS-P attributes:&lt;/P&gt;
&lt;UL&gt;
&lt;LI&gt;left - the element's left position 
&lt;LI&gt;top - the element's top position 
&lt;LI&gt;visibility - specifies whether an element should be visible or hidden 
&lt;LI&gt;z-index - the element's stack order 
&lt;LI&gt;clip - element clipping 
&lt;LI&gt;overflow - how overflow contents are handled &lt;/LI&gt;&lt;/UL&gt;
&lt;HR&gt;

&lt;H3&gt;Position&lt;/H3&gt;
&lt;P&gt;The CSS position property allows you to control the positioning of an element 
in a document.&lt;/P&gt;
&lt;H3&gt;position:relative&lt;/H3&gt;
&lt;P&gt;The position:relative property positions an element relative to its current 
position.&lt;/P&gt;
&lt;P&gt;The following example positions the div element 10 pixels to the right 
&lt;B&gt;from where it's normally positioned&lt;/B&gt;:&lt;/P&gt;
&lt;TABLE class=ex cellSpacing=0 width="100%" border=1 ID="Table1"&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;PRE&gt;div
{
position:relative;
left:10;
}&lt;/PRE&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;
&lt;H3&gt;position:absolute&lt;/H3&gt;
&lt;P&gt;The position:absolute property positions an element from the margins of the 
window.&lt;/P&gt;
&lt;P&gt;The following example positions the div element 10 pixels to the right 
&lt;B&gt;from the left-margin of the the window&lt;/B&gt;:&lt;/P&gt;
&lt;TABLE class=ex cellSpacing=0 width="100%" border=1 ID="Table2"&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;PRE&gt;div
{
position:absolute;
left:10;
}&lt;/PRE&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;BR&gt;
&lt;HR&gt;

&lt;H3&gt;Visibility&lt;/H3&gt;
&lt;P&gt;The visibility property determines if an element is visible or not.&lt;/P&gt;
&lt;H3&gt;visibility:visible&lt;/H3&gt;
&lt;P&gt;The visibility:visible property makes the element visible.&lt;/P&gt;
&lt;TABLE class=ex cellSpacing=0 width="100%" border=1 ID="Table3"&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;PRE&gt;h1
{
visibility:visible;
}&lt;/PRE&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;
&lt;H3&gt;visibility:hidden&lt;/H3&gt;
&lt;P&gt;The visibility:hidden property makes the element invisible.&lt;/P&gt;
&lt;TABLE class=ex cellSpacing=0 width="100%" border=1 ID="Table4"&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;PRE&gt;h1
{
visibility:hidden;
}&lt;/PRE&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;BR&gt;
&lt;HR&gt;

&lt;H3&gt;Z-index&lt;/H3&gt;
&lt;P&gt;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.&lt;/P&gt;
&lt;TABLE class=ex cellSpacing=0 width="100%" border=1 ID="Table5"&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;PRE&gt;h1
{
z-index:1;
}&lt;/PRE&gt;&lt;PRE&gt;H3
{
z-index:2;
}&lt;/PRE&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;
&lt;P&gt;In the example above, if the h1 and H3 elements are positioned on top of each 
other, the H3 element will be positioned on top of the h1 element.&lt;/P&gt;
&lt;HR&gt;

&lt;H3&gt;Filters&lt;/H3&gt;
&lt;P&gt;The filter property allows you to add more style effects to your text and 
images.&lt;/P&gt;
&lt;TABLE class=ex cellSpacing=0 width="100%" border=1 ID="Table6"&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;PRE&gt;h1
{
width:100%;
filter:glow;
}&lt;/PRE&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;
&lt;P&gt;&lt;B&gt;Note:&lt;/B&gt; Always specify the width of the element if you want to use the 
filter property.&lt;/P&gt;
&lt;P&gt;The example above produces this output:&lt;/P&gt;
&lt;TABLE class=ex cellSpacing=0 width="100%" border=1 ID="Table7"&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TD&gt;
&lt;H1 style="FILTER: glow; WIDTH: 100%"&gt;Header&lt;/H1&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;
&lt;H3&gt;Different Filters&lt;/H3&gt;
&lt;P&gt;&lt;B&gt;Note:&lt;/B&gt; Some of the Filter properties will not work unless the 
background-color property is set to transparent!&lt;/P&gt;
&lt;TABLE class=ex cellSpacing=0 width="100%" border=1 ID="Table8"&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TH vAlign=top align=left width="15%"&gt;Property&lt;/TH&gt;
&lt;TH vAlign=top align=left width="10%"&gt;Argument&lt;/TH&gt;
&lt;TH vAlign=top align=left width="50%"&gt;Description&lt;/TH&gt;
&lt;TH vAlign=top align=left width="25%"&gt;Example&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD vAlign=top&gt;alpha&lt;/TD&gt;
&lt;TD 
vAlign=top&gt;opacity&lt;BR&gt;finishopacity&lt;BR&gt;style&lt;BR&gt;startx&lt;BR&gt;starty&lt;BR&gt;finishx&lt;BR&gt;finishy &lt;/TD&gt;
&lt;TD vAlign=top&gt;Allows you to set the opacity of the element&lt;/TD&gt;
&lt;TD vAlign=top&gt;filter:alpha(opacity=20, finishopacity=100, style=1, 
startx=0, &lt;BR&gt;starty=0, finishx=140, finishy=270)&lt;BR&gt;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD vAlign=top&gt;blur&lt;/TD&gt;
&lt;TD vAlign=top&gt;add&lt;BR&gt;direction&lt;BR&gt;strength&lt;/TD&gt;
&lt;TD vAlign=top&gt;Makes the element blur&lt;/TD&gt;
&lt;TD vAlign=top&gt;filter:blur(add=true, direction=90, strength=6);&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD vAlign=top&gt;chroma&lt;/TD&gt;
&lt;TD vAlign=top&gt;color&lt;/TD&gt;
&lt;TD vAlign=top&gt;Makes the specified color transparent&lt;/TD&gt;
&lt;TD vAlign=top&gt;filter:chroma(color=#ff0000)&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD vAlign=top&gt;fliph&lt;/TD&gt;
&lt;TD vAlign=top&gt;none&lt;/TD&gt;
&lt;TD vAlign=top&gt;Flips the element horizontally&lt;/TD&gt;
&lt;TD vAlign=top&gt;filter:fliph;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD vAlign=top&gt;flipv&lt;/TD&gt;
&lt;TD vAlign=top&gt;none&lt;/TD&gt;
&lt;TD vAlign=top&gt;Flips the element vertically&lt;/TD&gt;
&lt;TD vAlign=top&gt;filter:flipv;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD vAlign=top&gt;glow&lt;/TD&gt;
&lt;TD vAlign=top&gt;color&lt;BR&gt;strength&lt;/TD&gt;
&lt;TD vAlign=top&gt;Makes the element glow&lt;/TD&gt;
&lt;TD vAlign=top&gt;filter:glow(color=#ff0000, strength=5);&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD vAlign=top&gt;gray&lt;/TD&gt;
&lt;TD vAlign=top&gt;none&lt;/TD&gt;
&lt;TD vAlign=top&gt;Renders the element in black and white&lt;/TD&gt;
&lt;TD vAlign=top&gt;filter:gray;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD vAlign=top&gt;invert&lt;/TD&gt;
&lt;TD vAlign=top&gt;none&lt;/TD&gt;
&lt;TD vAlign=top&gt;Renders the element in its reverse color and brightness 
values&lt;/TD&gt;
&lt;TD vAlign=top&gt;filter:invert;&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD vAlign=top&gt;mask&lt;/TD&gt;
&lt;TD vAlign=top&gt;color&lt;/TD&gt;
&lt;TD vAlign=top&gt;Renders the element with the specified background color, and 
transparent foreground color&lt;/TD&gt;
&lt;TD vAlign=top&gt;filter:mask(color=#ff0000);&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD vAlign=top&gt;shadow&lt;/TD&gt;
&lt;TD vAlign=top&gt;color&lt;BR&gt;direction&lt;/TD&gt;
&lt;TD vAlign=top&gt;Renders the element with a shadow&lt;/TD&gt;
&lt;TD vAlign=top&gt;filter:shadow(color=#ff0000, direction=90);&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD vAlign=top&gt;dropshadow&lt;/TD&gt;
&lt;TD vAlign=top&gt;color&lt;BR&gt;offx&lt;BR&gt;offy&lt;BR&gt;positive&lt;/TD&gt;
&lt;TD vAlign=top&gt;Renders the element with a dropshadow&lt;/TD&gt;
&lt;TD vAlign=top&gt;filter:dropshadow(color=#ff0000, offx=5, offy=5, 
positive=true);&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD vAlign=top&gt;wave&lt;/TD&gt;
&lt;TD vAlign=top&gt;add&lt;BR&gt;freq&lt;BR&gt;lightstrength&lt;BR&gt;phase&lt;BR&gt;strength&lt;/TD&gt;
&lt;TD vAlign=top&gt;Renders the element like a wave&lt;/TD&gt;
&lt;TD vAlign=top&gt;filter:wave(add=true, freq=1, lightstrength=3, phase=0, 
strength=5)&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD vAlign=top&gt;xray&lt;/TD&gt;
&lt;TD vAlign=top&gt;none&lt;/TD&gt;
&lt;TD vAlign=top&gt;Renders the element in black and white with reverse color and 
brightness values&lt;/TD&gt;
&lt;TD vAlign=top&gt;filter:xray;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;BR&gt;
&lt;HR&gt;

&lt;H3&gt;Background&lt;/H3&gt;
&lt;P&gt;The background property allows you to select your own background.&lt;/P&gt;
&lt;H3&gt;background-attachment:scroll&lt;/H3&gt;
&lt;P&gt;The background scrolls along with the rest of the page.&lt;/P&gt;
&lt;H3&gt;background-attachment:fixed&lt;/H3&gt;
&lt;P&gt;The background does not move when the rest of the page scrolls.&lt;/P&gt;
&lt;HR&gt;

&lt;H3&gt;More Examples&lt;/H3&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_visibility" 
target=_blank&gt;Visibility&lt;/A&gt;&lt;BR&gt;How to make an element invisible. Do you want 
the element to show or not?&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_zindex2" 
target=_blank&gt;Z-index&lt;/A&gt;&lt;BR&gt;Z-index can be used to place an element "behind" 
another element, using Z-index priority.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_zindex1" 
target=_blank&gt;Z-index&lt;/A&gt;&lt;BR&gt;Check that the elements now have changed their 
Z-index priority.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_cursor" 
target=_blank&gt;Cursors&lt;/A&gt;&lt;BR&gt;Change the style of the mouse cursor with CSS.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_filter" 
target=_blank&gt;Filters&lt;/A&gt;&lt;BR&gt;Change the style of your headings using the filter 
property.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.</description><guid>http://www.softxml.com/LearnTutorial.asp?id=350116966&amp;f=dhtml&amp;fo=tutorials</guid><category>dhtml</category></item><item><title>DHTML Document Object Model</title><link>http://www.softxml.com/LearnTutorial.asp?id=31330435903&amp;f=dhtml&amp;fo=tutorials</link><description>&lt;P&gt;The Document Object Model gives us access to every element in a 
document.&lt;/P&gt;
&lt;HR&gt;

&lt;H3&gt;Examples&lt;/H3&gt;
&lt;P style="COLOR: #0000ff"&gt;&lt;B&gt;Note:&lt;/B&gt; Most of the DHTML examples require IE 
4.0+, Netscape 7+, or Opera 7+!&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_dom_color" target=_blank&gt;Element 
access&lt;/A&gt;&lt;BR&gt;How to access an element and change the style.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_dom_image" target=_blank&gt;Attribute 
change&lt;/A&gt;&lt;BR&gt;How to access an image element and change the "src" attribute.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_dom_innertext" 
target=_blank&gt;innerHTML&lt;/A&gt;&lt;BR&gt;How to access and change the innerHTML of an 
element.&lt;/P&gt;
&lt;HR&gt;

&lt;H3&gt;How to access an element?&lt;/H3&gt;
&lt;P&gt;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.&lt;/P&gt;
&lt;TABLE class=ex cellSpacing=0 width="100%" border=1 ID="Table1"&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;PRE&gt;&amp;lt;html&amp;gt;
&amp;lt;body&amp;gt;&lt;/PRE&gt;&lt;PRE&gt;&amp;lt;h1 id="header"&amp;gt;My header&amp;lt;/h1&amp;gt;&lt;/PRE&gt;&lt;PRE&gt;&amp;lt;script type="text/javascript"&amp;gt;
document.</description><guid>http://www.softxml.com/LearnTutorial.asp?id=31330435903&amp;f=dhtml&amp;fo=tutorials</guid><category>dhtml</category></item><item><title>DHTML Event Handlers</title><link>http://www.softxml.com/LearnTutorial.asp?id=41657834213&amp;f=dhtml&amp;fo=tutorials</link><description>&lt;P&gt;With an event handler you can do something with an element when 
an event occurs.&lt;/P&gt;
&lt;HR&gt;

&lt;H3&gt;Examples&lt;/H3&gt;
&lt;P style="COLOR: #0000ff"&gt;&lt;B&gt;Note:&lt;/B&gt; Most of the DHTML examples require IE 
4.0+, Netscape 7+, or Opera 7+!&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_event_onmouse" target=_blank&gt;onmouseover 
&amp;amp; onmouseout&lt;/A&gt;&lt;BR&gt;How to change the color of an element when the cursor 
moves over and out of an element.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_examples_image" 
target=_blank&gt;onclick&lt;/A&gt;&lt;BR&gt;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.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_event_onmousedown" 
target=_blank&gt;onmousedown &amp;amp; onmouseup&lt;/A&gt;&lt;BR&gt;This time the light is on only 
when you hold the mouse button down.&lt;/P&gt;
&lt;P&gt;&lt;A href="http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_event_onload" 
target=_blank&gt;onload&lt;/A&gt;&lt;BR&gt;Displays an alert box when the page has finished 
loading.&lt;/P&gt;
&lt;HR&gt;

&lt;H3&gt;Event handlers&lt;/H3&gt;
&lt;P&gt;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.&lt;/P&gt;
&lt;TABLE class=ex cellSpacing=0 width="100%" border=1 ID="Table1"&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;PRE&gt;&amp;lt;h1 onclick="style.color='red'"&amp;gt;Click on this text&amp;lt;/h1&amp;gt;&lt;/PRE&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;
&lt;P&gt;The example above defines a header that turns red when a user clicks on 
it.&lt;/P&gt;
&lt;P&gt;You can also add a script in the head section of the page and then call the 
function from the event handler:&lt;/P&gt;
&lt;TABLE class=ex cellSpacing=0 width="100%" border=1 ID="Table2"&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TD&gt;&lt;PRE&gt;&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
&amp;lt;script type="text/javascript"&amp;gt;
function changecolor()
{
document.getElementById('header').style.color="red"
}
&amp;lt;/script&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
&amp;lt;h1 id="header" onclick="changecolor()"&amp;gt;
Click on this text&amp;lt;/h1&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;&lt;/PRE&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;BR&gt;
&lt;HR&gt;

&lt;H3&gt;HTML 4.0 Event Handlers&lt;/H3&gt;
&lt;TABLE class=ex cellSpacing=0 width="100%" border=1 ID="Table3"&gt;
&lt;TBODY&gt;
&lt;TR&gt;
&lt;TH align=left width="30%"&gt;Event&lt;/TH&gt;
&lt;TH align=left width="70%"&gt;Occurs when...&lt;/TH&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;onabort&lt;/TD&gt;
&lt;TD&gt;a user aborts page loading&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;onblur&lt;/TD&gt;
&lt;TD&gt;a user leaves an object&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;onchange&lt;/TD&gt;
&lt;TD&gt;a user changes the value of an object&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;onclick&lt;/TD&gt;
&lt;TD&gt;a user clicks on an object&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;ondblclick&lt;/TD&gt;
&lt;TD&gt;a user double-clicks on an object&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;onfocus&lt;/TD&gt;
&lt;TD&gt;a user makes an object active&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;onkeydown&lt;/TD&gt;
&lt;TD&gt;a keyboard key is on its way down&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;onkeypress&lt;/TD&gt;
&lt;TD&gt;a keyboard key is pressed&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;onkeyup&lt;/TD&gt;
&lt;TD&gt;a keyboard key is released&lt;/TD&gt;&lt;/TR&gt;
&lt;TR&gt;
&lt;TD&gt;onload&lt;/TD&gt;
&lt;TD&gt;a page is finished loading.</description><guid>http://www.softxml.com/LearnTutorial.asp?id=41657834213&amp;f=dhtml&amp;fo=tutorials</guid><category>dhtml</category></item></channel></rss>