You are on page 1of 13

DHTML TUTORIAL 1. DHTML INTRODUCTION 2. DHTML CSS 3. DHTML DOM 4.

DHTML Events NOTE: CONTENTS ON DHTML WILL BE ADDED WITHIN WEEK TIME.

1. DHTML INTRODUCTION 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 peopDHTML 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."

le DHTML means a combination of HTML, Style Sheets and JavaScript. 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 CSS2 (allows you to you to apply visual to control how control how different effects to text and different HTML HTML elements will graphics) elements will be be displayed) Dynamic CSS (allows displayed) CSS Positioning you to control element Layers (allows you to (allows you to positioning and control element control element visibility) 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.

DHTML SOME EXAMPLES FOR QUICK REFERENCE 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 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 direction=90, strength=6); strength color Makes the specified color filter:chroma(color=#ff0000) transparent none Flips the element horizontally filter:fliph; none Flips the element vertically filter:flipv; color Makes the element glow filter:glow(color=#ff0000,

blur

chroma fliph flipv glow

gray invert

strength none none

mask

color

shadow

color direction dropshadow color offx offy positive wave add Renders the element like a freq wave lightstrength phase strength xray none Renders the element in black and white with reverse color and brightness values

Renders the element in black and white Renders the element in its reverse color and brightness values Renders the element with the specified background color, and transparent foreground color Renders the element with a shadow Renders the element with a dropshadow

strength=5); filter:gray; filter:invert;

filter:mask(color=#ff0000);

filter:shadow(color=#ff0000, direction=90); filter:dropshadow(color=#ff0000, offx=5, offy=5, positive=true);

filter:wave(add=true, freq=1, lightstrength=3, phase=0, strength=5)

filter:xray;

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. SOME CODES: 1>Move the mouse over the words to see the cursor change

<html> <body>

<p>Move the mouse over the words to see the cursor change</p> <span style="cursor: auto">Auto</span><br /> <span style="cursor: crosshair">Crosshair</span><br /> <span style="cursor: default">Default</span><br /> <span style="cursor: pointer">Pointer</span><br /> <span style="cursor: hand">Hand</span><br /> <span style="cursor: move">Move</span><br /> <span style="cursor: e-resize">e-resize</span><br /> <span style="cursor: ne-resize">ne-resize</span><br /> <span style="cursor: nw-resize">nw-resize</span><br /> <span style="cursor: n-resize">n-resize</span><br /> <span style="cursor: se-resize">se-resize</span><br /> <span style="cursor: sw-resize">sw-resize</span><br /> <span style="cursor: s-resize">s-resize</span><br /> <span style="cursor: w-resize">w-resize</span><br /> <span style="cursor: text">text</span><br /> <span style="cursor: wait">wait</span><br /> <span style="cursor: help">help</span><br /> </body> </html> 2>USE OF FILTER <html> <head> <style> h2 { width:100%; } </style> </head> <body> <h2 style="filter:glow()">Glow</h2> <h2 style="filter:blur()">Blur</h2>

<h2 style="filter:fliph()">Flip H</h2> <h2 style="filter:flipv()">Flip V</h2> <h2 style="filter:shadow()">Shadow</h2> <h2 style="filter:dropshadow()">Drop Shadow</h2> <h2 style="filter:wave(Strength=2)">Wave</h2> <p>NOTE: Filters don't work if the width property of the element is not set.</p> </body> </html>

3>USE OF MASK ON IMAGE <html> <head> <style> div { width:160px; height:120px; } </style> </head> <body> Alpha: <div style="filter:alpha(Opacity=20)"> <img src="landscape.jpg" width="160" height="120" /> </div> Gray: <div style="filter:gray()"> <img src="landscape.jpg" width="160" height="120" /> </div>

Invert: <div style="filter:invert()"> <img src="landscape.jpg" width="160" height="120" /> </div> Xray: <div style="filter:xray()"> <img src="landscape.jpg" width="160" height="120" /> </div> Mask: <div style="position:absolute;left:10;top:610;"> <img src="landscape.jpg" width="160" height="120" /> </div> <div style="position: absolute; left: 10; top: 610; filter: mask(color=#ffffff); width: 160; height: 120"> <h2>The mask value makes the text transparent</h2> </div> </body> </html> 4>TEXT TRANSFORM <html> <head> <style> a:hover { text-transform:uppercase; } </style> </head> <body>

<a href="default.asp">Mouse over this link</a> </body> </html> 5>Change Background of Image <html> <head> <script type="text/javascript"> function bgChange(bg) { document.body.background=bg } </script> </head> <body> <b>Mouse over these images, and the background will change</b> <table width="300" height="100"> <tr> <td onmouseover="bgChange('paper.jpg')" background="paper.jpg"> </td> <td onmouseover="bgChange('bluesilk.jpg')" background="bluesilk.jpg"> </td> <td onmouseover="bgChange('bgdesert.jpg')" background="bgdesert.jpg"> </td> </tr> </table> </body> </html> 6>Working with z-index for layering

6.1> <html> <head> <script type="text/javascript"> function bgChange(bg) { document.body.background=bg } </script> </head> <body> <b>Mouse over these images, and the background will change</b> <table width="300" height="100"> <tr> <td onmouseover="bgChange('paper.jpg')" background="paper.jpg"> </td> <td onmouseover="bgChange('bluesilk.jpg')" background="bluesilk.jpg"> </td> <td onmouseover="bgChange('bgdesert.jpg')" background="bgdesert.jpg"> </td> </tr> </table> </body> </html> 6.2> <html> <head>

<style> img.x { position:absolute; left:0px; top:0px; z-index:1; } </style> </head> <body> <h1>This is a Heading</h1> <img class="x" src="bulbon.gif" width="100" height="180"> <p>Default z-index is 0. Z-index 1 has higher priority.</p> </body> </html> 7>Button with Background Image <html> <head> <style> input { background-image:url('landscape.jpg'); } </style> <script type="text/javascript"> function over() { if (event.srcElement.tagName=="INPUT") {

event.srcElement.style.backgroundImage="url('w3school s.gif')" } } function out() { if (event.srcElement.tagName=="INPUT") { event.srcElement.style.backgroundImage="url('landscap e.jpg')" } } </script> </head> <body> <p>Mouse over these buttons</p> <form onmouseout="out()" onmouseover="over()"> <input class="a" type="button" value="Button 1"><br /> <input class="b" type="button" value="Button 2"><br /> <input class="c" type="button" value="Button 3"><br /> </form> </body> </html> 8>Page enter Effects <html> <head> <script type="text/javascript"> function page_enter() { window.location="demo_pageenter4.htm" } </script>

</head> <body> <input type="button" onclick="page_enter()" value="Show Page Enter Effect"> </body> </html>