DHTML DYNAMIC HYPER TEXT MARKUP LANGUAGE

DHTML DYNAMIC HYPER TEXT MARKUP LANGUAGE
DHTML = XHTML + CSS + JAVASCRIPT + DOM

What is DHTML? Dynamic HTML, or DHTML, is an umbrella term for a collection of technologies used together to create interactive and animated web sites by using a combination of a static markup language (such as HTML), a client-side scripting language (such as JavaScript), a presentation definition language (such as CSS), and the Document Object Model (DOM). DHTML allows scripting languages to change variables in a web page's definition language, which in turn affects the look and function of otherwise "static" HTML page content, after the page has been fully loaded and during the viewing process. Thus the dynamic characteristic of DHTML is the way it functions while a page is viewed, not in its ability to generate a unique page with each page load. 2. What are the Advantages and Disadvantages? Advantages:- 1. Fast and Zippy: - DHTML loads content on fly. Your whole page does not loads but only the content part that needs to be altered, so saving the crucial time for the users and giving the snazzy look to the website. 2. Plug-ins, we don't need them: - DHTML uses most of the features already present in the browsers, so there is no need to download any sort of Plug-ins. 3. Great Utility:- The dynamic features possessed by DHTML are helping web designers to create Web pages that posses compact looks, downloads fast, have graphic effects, provides greater functionality and can hold much more text or content all at the same time.

Disadvantages:- 1. Costly Editing tools: - although DHTML provides great functionality but the editors' available for that in market are pretty expensive. Examples of DHTML editors are Dreamweaver and Fusion. 2. Long and Complex coding: - DHTML coding is long and complex. Only the expert JavaScript and HTML programmers can write them and edit them with good degree of functionality. 3. Browser Support problems: - DHTML suffers from browser support problems for different browsers. For example, a code written for Netscape might not work in Internet Explorer and Vice-Versa. The problem arises due to the different features of browsers. 3. What are the features of DHTML? Features of DHTML: Simplest feature is making the page dynamic. Can be used to create animations, games, applications, provide new ways of navigating through web sites. DHTML use low-bandwidth effect which enhance web page functionality. Dynamic building of web pages is simple as no plug-in is required. Facilitates the usage of events, methods and properties and code reuse.

Object Model and Collection
4. What are the differences between XHTML and DHTML? XHTML is a dialect that is based on the XML language while DHTML is not a dialect or a language but a collection of other technologies. DHTML was created to provide additional features and interactivity to XHTML. DHTML still uses XHTML at its core and is plagued with XHTML related problems. XHTML is more streamlined and easier to code with because of its conformance to XML. DHTML is already outdated and has been replaced by other technologies. Object Model and Collection The object model gives access to all elements of a Web page, whose properties and attributes can thus be retrieved or modified by scripting. The value of the id attribute of an element becomes the name of the object representing that element. The various HTML attributes of the element become properties of this object (which can be modified). For example, the value of the innerText property of a p element is the text within that element. So, if we have a P element with id pText, we can dynamically change the rendering of this element with, e.g., pText.innerText = “Good bye!”; This is dynamic content. In the following example, the function (not the window method) alert is used to pop up an alert box.

<html> <head> <title>object model</title> <script type = "text/javascript"> function start() { alert( pText.innerText ); pText.innerText = "Good bye!"; } </script> </head> <body onload = "start()"> <p id = "pText">hello!</p> </body> </html> When the page is loaded, the following appears both in the window and in an alert box: Hello! After the alert box is dismissed, the following appears in the window: Good bye!

Collections A collection is an array of related objects on a page. The all collection of an element (syntactically a property) is a collection of all the elements in it in order of appearance. This gives us reference even to elements that lack ID attributes. Like all collections, it has a length property. For example, document.all[ i ] references the ith element in the document. The following are needed for the next example. The innerHTML property of a p element is like the innerText property but may contain HTML formatting. The tagName property of an element is the name of the HTML element. <html>  <head> <title>Object Model</title> <script type = "text/javascript"> var elements = ""; function start() { for ( var loop = 0; loop < document.all.length; ++loop ) elements += "<BR>" +document.all[ loop ].tagName; pText.innerHTML += elements; } </script> </head> <body onload = "start()"> <p id = "pText">Elements on this Web page:</p> </body> </html>

Elements on this Web page:
HTML HEAD TITLE ! SCRIPT BODY P Note that the tagName property of a comment is !. The children collection for an object is like the all collection but contains only the next level down in the hierarchy. For example, an HTML element has a head and a body child. In the following example, function child(object) does a preorder traversal of the part of the object hierarchy rooted at object. For every object with children, it appends on to global variable Elements · <li>, · the name of the HTML element represented by the object, · <ul>, · similar information for the children (iteratively) and more distant descendants (recursively) of the object, and · </ul> The body tag is <body onload = “child( document.all[ 1 ] ); myDisplay.outerHTML += elements;”>

When the page is loaded, this calls child, passing it the first object in the hierarchy. (The first element is the HTML at the top of the file.) When control returns from the call, the string in global variable elements (containing the hierarchical description of the objects) is appended to the value of the outerHTML property of P element myDisplay. Property outerHTML is like innerHTML but includes the enclosing tags. <html>  <head> <title>Object Model</title> <script type = "text/javascript"> var elements = "<ul>"; function child( object ) { var loop = 0; elements += "<LI>" + object.tagName + "<UL>"; for( loop = 0; loop < object.children.length;loop++ ) if ( object.children[loop].children.length ) child( object.children[ loop ] ); else elements += "<LI>" + object.children[ loop ].tagName "</LI>"; elements += " </UL> "; } </script> </head>

<body onload = "child( document. all[ 0 ] ); myDisplay
<body onload = "child( document.all[ 0 ] ); myDisplay.outerHTML += elements;"> <p>Welcome to our <strong>Web</strong> page!</p> <p id = "myDisplay"> Elements on this Web page: </p> </body> </html> Welcome to our Web page! Elements on this Web page: 1. HTML 1. HEAD 1. TITLE 2. ! 3. SCRIPT 2. BODY 1. P 1. STRONG 2. P Dynamic Styles and Positioning We can change an element’s style dynamically. Most HTML elements have a style object as a property. The names of the properties of this object used in JavaScript are generally their HTML names modified to avoid the “-“ e.g., HTML JavaScript background-color backgroundColor border-width borderWidth font-family fontFamily

We can make assignments to these properties, dynamically changing the element’s rendering – e.g.,
document.body.style.fontSize = 16; Suppose an element’s CSS position property is declared to be either absolute or relative. Then we can move it by manipulating any of the top, left, right, or bottom CSS properties of its style object. – This is dynamic positioning. Example Suppose in the body we have <p id = "pText1“ style = "position: absolute; top: 35"> CCET</p> and in the script we have pText1.style.left = 100; Then the rendering CCET of the pText1 element will be shifted right 100 pixels. We can also change the class attribute of an element by assigning the name of a class we have defined to the element’s className property. Example Suppose in the body we have <p id = "pText2">CSE</p> in the style sheet we have defined .bigText { font-size: 2em } pText2.className = "bigText"; Then the rendering of CCET will be twice as large as the surrounding text.

<html> <head> <title>Dynamic Styles</title> <style type = "text/css"> .bigText { font-size: 2em } </style> <script type = "text/javascript"> function start() { alert( "Go!" ); document.body.style.fontSize = 16; pText1.style.left = 100; pText2.className = "bigText"; } </script> </head> <body onload = "start()"> <p id = "pText1“ STYLE = "position: absolute; top: 35"> XXX</p> <p id = "pText2">CCC</p> </body> </html>

To get perceptible dynamic effects, we need some way to control when element attributes and properties are changed. The setInterval method of the window object, used as window.setInterval( “function_name()”, msec) invokes function function_name every msecs milliseconds. Method setTimeout has the same parameters, but it waits msecs milliseconds before invoking function_name only once. Both setInterval and setTimeout return values, which can be assigned to variables. Method clearInterval takes the value returned by setInterval and terminates the timed function’s executions. Method clearTimeout takes the value returned by setTimeout and stops the timer before it fires (if it hasn’t already). Example timer = window.setInterval( “f()”, 1000); … window.clearInterval( timer );

<html> <head> <title>Example Program for the SetInterval() and ClearInterval() methods</title> <script language="javascript"> var c = 1; var timer = window.setInterval("Click_Count()",1000); function Click_Count() { f1.t1.value = c; c = c + 1; } function Clear_Timer() window.clearInterval(timer); </script> </head> <body> <form name="f1"> <input type="text" name="t1" value=""> <input type="button" name="b1" value="Stop Timer" onclick="Clear_Timer()"> </form> </body></html>

Cross-Frame Referencing
With frame sets, we have the problem of referencing elements that are on different pages. In a page loaded into a frame, parent references the parent page (containing a frame element with the current page’s URL as the value of its src attribute). Then parent.frames is the collection of frames in the parent of the current page. We can reference any page that is the source of some frame in the parent’s frame set either by using the ordinal (0 to the number of frames minus one) of the frame within the frame set as an index or by using the value of the name attribute of the desired frame as an argument. Example parent.frames[ 1 ] parent.frames( “lower” ) This gets us to the document level of the page. If no page is loaded into the selected frame, the frame’s document object is still defined – designating the space rendered for that frame in the rendering of the parent. parent.frames( “lower” ).document.writeln( “<p>lower</p>” );

Example: The following is a page that defines a frame set. One of its frames has “frameset2.html” as the value of its SRC attribute. <html> <head> <title>Frames collection</title> </head> <frameset rows = "100, *"> <frame src = "frameset2.html" name = "upper"> <frame src = "" name = "lower"> </frameset> </html> The following is file frameset2.html: <title>The frames collection</title> <script type = "text/javascript"> function start() { parent.frames( "lower" ).document.write( "<p>lower</p>" ); } </script> <body onload = "start()"> <p>upper</p> </body>

The navigator Object Both Netscape’s Navigator and Microsoft’s Internet Explorer support the navigator object. It contains information about the browser that’s viewing the page. Property navigator.appName is“Microsoft Internet Explorer” if the application is Internet Explorer and “Netscape” if the application is Netscape’s Navigator. Property navigator.appVersion is a string of various information, starting with the version number. For the following example, note that document.location is the URL of the document being viewed.

<html> <head> <script language=“javascript”> function start() { alert(navigator.appName); alert(navigator.appVersion); if ( navigator.appName == "Microsoft Internet Explorer" ) document.location = "newIEversion.html"; } else document.location = "NSversion.html“; <script> <body> <input type=“button” name=“b1” value=“Click Navigator Object” onclick=“start()”> </body> </html>

Object Model and Collections

window (object) represents the browser window and provides access to the document object contained in the window. If the window contains frames, a separate window object is created for each frame, providing access to the document rendered in that frame. document (object) provides access to every element in the HTML document. frames (collection) contains window objects for each frame in the browser window. body (object) provides access to the body element of the HTML document. location (object) contains the URL of the rendered document. screen (object) contains information on the screen of the computer on which the browser is running. forms (collection) contains all the form elements of the document. images (collection) contains all the img elements of the document. scripts (collection) contains all the script elements of the document.

styleSheets (collection) contains all styleSheet objects, representing each style element in the document and each style sheet included via a link. links (collection) contains all the anchor (A) with an href property and all area elements representing links in an image map. anchors (collection) contains all anchor (A) elements with a NAME or ID property. event (object) can be used in an event handler to get information about the event that just occurred. DHTML Events Every element on an HTML page has events which can trigger a JavaScript. For example, we can use the onclick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags. Examples of events: 1. A mouse click 2. A web page or an image loading 3. Mousing over a hot spot on the web page 4. Selecting an input field in an HTML form 5. Submitting an HTML form 6. A keystroke

Basic Category of Events
1. Clipboard Events 2. Data binding Events 3. Keyboard Events 4. Marquee Events 5. Miscellaneous Events Some Events of DHTML Event Name Description Onkeydown Fires when the user pushes down a key. Onkeypress Fires when the user presses a key. Onkeyup Fires when the user ends a key press. Onbounce Fires when a scrolling marquee bounces back in the other direction Onfinish Fires when marquee finishes its scrolling Onstart Fires when a marquee begins a new loop Onclick Fires when the Button or Mouse is Clicked Ondblclick Fires when the mouse is double clicked Onmousedown Fires when a mouse button is pressed down. Onmouseup Fires when a mouse is released. Onerror Fires when a image is not displayed

Event Name Description Onchange Fires when a new choice is made in a select element, or when a text input is changed and the element loses focus. Onreset Fires when a form resets. Onresize Fires when the size of an object changes. Onscroll Fires when a windows or frame is scrolled Onselect Fires when a text selection begins Onstop Fires when the user stops loading the object Onunload Fires when a page is about to unload OnClick – Event <html> <head> <script language="javascript"> function Click_Event() { alert("The alert box is Clicked the Inner Html is changed"); para.innerText = "Chettinad College of Engineering and Technology"; } </script> </head>

<body> <form name = "f1"> <p id="para">Welcome</p> <input type="button" name="b1" value="Click Here" onclick="Click_Event()"> </form </body> </html> OnLoad – Event <html> <head> <script language="javascript"> function Load_Event() { alert("The alert box is Clicked the Inner Html is changed"); para.innerHTML = "Chettinad College of Engineering and Technology"; } </script> </head>

<body onload=“Load_Event()">
<form name = "f1"> <p id="para">Welcome</p> </form </body> </html> Onerror - Event <html> <head> <script language="javascript"> function Error_Event() { alert("Image is Not Displayed"); } </script> </head> <body> <img id="image" src="file:///z:/22.gif" alt="Image not Displayed" onerror="Error_Event()"> </body> </html>

OnMouseMove – Event <html> <head> <script language="javascript"> function MouseMove_Event() { alert("Move on the Image immediately another Image is displayed"); document.body.background = "file:///z:/22.gif"; } </script> </head> <body> <img id="image" src="file:///z:/33.gif" alt="Image not Displayed" onmousemove="MouseMove_Event()"> </body> </html>

OnMouseOver and OnMouseOut - Event
<html> <head> <script language="javascript"> function MouseOver_Event() { document.body.background = "file:///z:/22.gif"; } function MouseOut_Event() document.body.background = ""; </script> </head> <body> <img id="image" src="file:///z:/33.gif" alt="Image not Displayed" onmouseover="MouseOver_Event()" onmouseout="MouseOut_Event()"> </body> </html>

OnFocus and OnBlur - Event
<html> <head> <script language="javascript"> function OnFocus_Event() { f1.t1.value = "This Focus Event"; } function OnBlur_Event() f1.t2.value = "This is Blur Event"; </script> </head> <body> <form name="f1"> <input type="text" name="t1" value="" onfocus="OnFocus_Event()"> <input type="text" name="t2" value="" onblur="OnBlur_Event()"> </form> </body> </html>

OnSubmit and OnReset - Event
<html> <head> <script language="javascript"> function Click_Submit_Event() { var bool = confirm("Are you want to Submit"); if(bool == true) alert("The data was stored"); else alert("The data was not stored"); } function Click_Reset_Event() alert("All the form's items are Deleted"); </script> </head>

<body> <center><b><font size="30">Employee Management System</font></b></center> <pre> <form name="f1" action = "" onsubmit="Click_Submit_Event()" onreset="Click_Reset_Event()"> Enter the First Name <input type="text" name="t1" value=""> Enter the Last Name <input type="text" name="t2" value=""> Enter the Age <input type="text" name="t3" value=""> Enter the Address <textarea rows=5 cols=15></textarea> Enter the Desgination <select name="s1"> <option></option> <option>Lecturer</option> <option>Senior Lecturer</option> <option>Assitant Professor</option> <option>Associate Professor</option> <option>Professor</option> </select> <input type="submit" name="s1" value="Submit"> <input type="reset" name="r1" value="Reset"> </form> </pre> </body> </html>

Event Bubbling The bubbles event attribute returns a Boolean value that indicates whether or not the event is a bubbling event. Event bubbling directs an event to its intended target, it works like this: A button is clicked and the event is directed to the button If an event handler is set for that object, the event is triggered If no event handler is set for that object, the event bubbles up (like a bubble in water) to the objects parent The event bubbles up from parent to parent until it is handled, or until it reaches the document object. <html> <head> <script type="text/javascript"> function getEventType(event) { alert(event.bubbles); } </script> </head> <body onclick="getEventType(event)"> <p>Click somewhere in the document. An alert box will tell if the event is a bubbling event.</p> </body> </html>

Marquee – OnStart Event
<html> <head> <script type="text/javascript"> function Marquee_Start() { alert("The Event is Triggered for the Marquee Started"); } </script> </head> <body> <marquee onstart="Marquee_Start()">Welcome to CCET</marquee> </body> </html> Marquee – OnFinish Event <html> <head> <script type="text/javascript"> function Marquee_Finish() { alert("The Event is Triggered for the Marquee Finished"); } </script> </head> <body><marquee behavior=“slide” loop=2 onfinish="Marquee_Finish()">Welcome to CCET</marquee> </body> </html>

Marquee – OnBounce Event
<html> <head> <script type="text/javascript"> function Marquee_Bounce() { alert("The Event is Triggered for the Marquee returned to other direction"); } </script> </head> <body> <marquee behavior="alternate" onbounce="Marquee_Bounce()">Welcome to CCET</marquee> </body> </html>

OnChange - Event <html> <head> <script type="text/javascript"> function OnChange_Event() { if(f1.s1.value == "Addition") f1.t1.value = "Addition"; else if(f1.s1.value == "Subtraction") f1.t1.value = "Subtraction"; else if(f1.s1.value == "Multiplication") f1.t1.value = "Multiplication"; else if(f1.s1.value == "Division") f1.t1.value = "Division"; else if(f1.s1.value == "") f1.t1.value = ""; } </script> </head>

<body> <form name="f1"> <select name="s1" onchange="OnChange_Event()"> <option></option> <option>Addition</option> <option>Subtraction</option> <option>Multiplication</option> <option>Division</option> </select> <input type="text" name="t1" value=""> </form> </body> </html> OnSelect - Event <html> <head> <script type="text/javascript"> function OnSelect_Event() { f1.t1.value = "Welcome to CCET"; } </script> </head>

OnResize Event: <body> <form name="f1">
<input type="text" name="t1" value=""> <input type="text" name="t2" value=“Select The Text Here" onselect="OnSelect_Event()"> </form> </body> </html> OnResize Event: <html> <head> <script language=“javascript”> function Resize_Event() { alert(“Event get Triggered”); document.getElementById(“b1”).style.background=“red”; } </script> </head> <body onresize=“Resize_Event()” id=“b1”> <h1> RESIZE THE BROWSER WINDOW <h1> </body> </html>

OndblClick: <html> <head>
<script language="javascript"> function DoubleClick_Event() { document.getElementById("image").height=" "; document.body.background = "file://///techserv/CSE/Venki/IP_notes/images/3.gif"; } </script> </head> <body> <img id="image" src="file://///techserv/CSE/Venki/IP_notes/images/4.gif" alt="Image not Displayed" ondblclick="DoubleClick_Event()"> </body> </html>

OnKeyUp and OnKeyDown:
<html> <head> <script language="javascript"> function KeyUp_Event() { document.getElementById("image").height="350"; } function KeyDown_Event() document.getElementById("image").height="500"; </script> </head> <body onkeyup="KeyUp_Event()" onkeydown="KeyDown_Event()"> <img id="image" src="file://///techserv/CSE/Venki/IP_notes/images/4.gif" alt="Image not Displayed"> </body> </html>

CSS Positioning Positioning The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. There are four different positioning methods. 1. Static Positioning 2. Fixed Positioning 3. Relative Positioning 4. Absolute Positioning Static Positioning HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties. Fixed Positioning An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled:

Fixed positioned elements are removed from the normal flow
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist. Fixed positioned elements can overlap other elements. Relative Positioning A relative positioned element is positioned relative to its normal position. The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow. Relatively positioned elements are often used as container blocks for absolutely positioned elements. Absolute Positioning An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html> Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist. Absolutely positioned elements can overlap other elements. <html> <head> <title>CSS Positioning</title> <style type = "text/css“> .ip1 {position:static;left:30px;right:50px;top:100px;bottom:100px} .ip2 {position:fixed;left:100px;top:100px;bottom:70px} .ip3 {position:relative;left:100px;top:100px} .ip4 {position:absolute;right:400px;top:100px;bottom:100px} </style> </head>

Filters and Transitions
Cause changes that are persistent Transitions Temporary Allow transfer from one page to another with pleasant visual effect For example, random dissolve Flip Filters: flipv and fliph flipv and fliph filters mirror text or images vertically and horizontally, respectively <html> <head> <title>Filters and Transitions</title> </head> <body bgcolor="yellow"> <center><b><font size="40">Text Filters</font></b></center> <center><table border='1' bgcolor="pink" cellpadding="100">

<tr> <td><font size="30" color="red">CCET</font></td> <td style="filter:fliph"><font size="30" color="red">CCET</font></td> </tr> <td style="filter:fliph flipv"><font size="30" color="red">CCET</font></td> <td style="filter:flipv"><font size="30" color="red">CCET</font></td> </table></center> </body> </html> Output

Transparency with the chroma Filter
chroma filter applies transparency effects dynamically Without using a graphics editor to hard-code transparency into the image onchange Fires when the value of a form changes <html> <head> <title>Chroma Filter</title> <script type="text/javascript"> function changecolor() { if (f1.img.value ) //apply the user selected color into hexadecimal and then convert it into Integer chromaImg.filters("chroma" ).color= parseInt(f1.img.value,16); chromaImg.filters("chroma" ).enabled= true; } else chromaImg.filters("chroma" ).enabled= false; </script> </head>

<body> <h1> Chroma Filter </h1> <img id ="chromaImg" src="chroma.jpg" style="position: absolute; filter:chroma" alt ="Transparent Image" /> <form action = " " name="f1"> <select name="img" onchange="changecolor()" style="position:absolute;left:12;top:75"> <option value= "00FFFF ">Cyan</option> <option value= " FFFF00">Yellow</option> <option value= "FF00FF ">Magenta</option> <option value="000000" selected="selected">Black</option> </select> </form> </body> </html> Output

Image Filters: invert, gray and xray
invert filter Negative image effect Dark areas become light and light areas become dark gray filter Grayscale image effect All color is stripped from the image, only brightness data remains xray filter X-ray effect Inversion of the grayscale effect <html> <head> <title>Image Filters</title> </head> <body bgcolor="pink"> <center><font size="30">Image Filters</font><center> <center><table border="1" width="30%"> <tr> <td align="center">Normal</td> <td align="center">GrayScale</td> </tr>

<tr> <td align="center"><img src="file:///z:/22.gif"></td> <td align="center" style="filter:gray"><img src="file:///z:/22.gif"></td> </tr> <td align="center">XRAY</td> <td align="center">Invertor</td> <td align="center" style="filter:xray"><img src="file:///z:/22.gif"></td> <td align="center" style="filter:invert"><img src="file:///z:/22.gif"></td> </table> </center> </body> </html>

Output

Creating Image Mask Background is a solid color Foreground is transparent to the image or color behind it <html><head> <title>Creating Image Mask using Filters</title> </head> <body> <h1><center>Creating Image Mask using Filters</center></h1> <div style="position:absolute;left:60;top:125;bottom:50;filter:mask(color=#FF00FF)"> <h1 style="font-family:times new roman">Welcome to Chettinad Group</h1> </div> <img src="file:///z:/77.jpg" alt="Image is Not Displayed“></body></html>

Adding Shadow to Text shadow filter Showing effect Three-dimensional appearance <html> <head> <title>Shadow Filter</title> <script language="javascript"> var shadowDirection = 0; function start() { window.setInterval("rundemo()",1000) } function rundemo() shadowText.innerText = "Shadow Direction: " shadowDirection % 360; shadowText.filters("shadow").direction = ( shadowDirection % 360); shadowDirection += 45; </script> </head>

<body onload = "start()">
<h1 id = "shadowText" style = "position:absolute; top:25;left:25;padding:100;filter:shadow(color = red)">Shadow Direction: </h1> </body> </html>

Using the wave filter The wave filter allows you to apply sine-wave distortions to text and images on your web pages. The wave filter has many properties. The add property, like blur filter, adds a copy of the test or image underneath the filtered effect. The add property is useful only when applying the wave filter to images. The frea property determines the frequency of the wave applied – that is, how many complete sine waves are applied in the affected area. Increasing this property creates a more pronounced wave effect, but makes the text harder to read. The phase property indicates the phase shift of the wave. Increasing this property does not modify any physical attributes of the wave, but merely shifts it in space. This property is useful for creating a gentle waving effect. The last property, strength, is the amplitude of the sine wave that is applied.

<html> <head> <title>Wave Filter</title> <script language="javascript"> var wavePhase = 0; function start() { window.setInterval("wave()",10); } function wave() wavePhase++; flag.filters("wave").phase = wavePhase; fl.filters("wave").phase = wavePhase; </script> </head> <body onload = "start()"> <img id = "flag" style="position:absolute;left:30;padding:10;filter:wave(add=0,freq=1,phase =0 strength = 10)" src="file://///techserv/CSE/Venki/IP_notes/images/2.gif"> <h1 id = "fl" style="position:absolute;left:10;top:150;padding:10;filter:wave(add=0,freq=1, phase=0 strength = 10);font-size:4em">Here is some Waaaavy Text</span> </body> </html>

Creating Gradients with alpha
alpha filter Gradient effect Gradual progression from starting color to target color style Uniform opacity (value 0) Linear gradient (value 1) Circular gradient (value 2) Rectangular gradient (value 3)

<html> <head>
<title>Alpha Filter</title> <script language="javascript"> function run() { pic.filters("alpha").opacity = opacityButton.value; pic.filters("alpha").finishopacity = opacityButton2.value; pic.filters("alpha").style = styleSelect.value; } </script> </head> <body> <div id="pic" style ="position:absolute;left:0;top:0;filter:alpha(style = 2, opacity = 100, finishopacity = 0)"> <img src = "file:///z://88.jpg" alt="Flag"> </div> <table style = "position:absolute;top:250;left:0;background-color: #CCFFCC" border = "1"> <tr> <td>Opacity( ):</td> <td><input type = "text" id = "opacityButton" size = "3" maxlength = "3" value = "100"></td> </tr>

<tr> <td>FinishOpacity( ):</td> <td><input type = "text" id = "opacityButton2" size = "3" maxlength = "3" value = "0"></td> </tr> <td>Style:</td> <td> <select id = "styleSelect"> <option value = "1">Linear</option> <option value = "2" selected = "selected">Circular</option> <option value = "3">Rectangular</option> </select> </td> <td align = "center" colspan = "2"> <input type = "button" value = "Apply" onclick = "run()"> </table> </body> </html>

Making Text glow glow filter adds an aura of color around text
<html> <head> <title>Glow Filter</title> <script language="javascript"> var strengthIndex = 1; var counter = 0; var upDown = true; var colorArray = ["FF0000","FFFF00","00FF00","00FFFF","0000FF","FF00FF"]; function apply() { glowSpan.filters("glow").color = parseInt(glowColor.value,16); glowSpan.filters("glow").strength = glowStrength.value; } function startdemo() window.setInterval("rundemo()",150);

function rundemo() { if(upDown) glowSpan.filters("glow").strength = strengthIndex++; } else glowSpan.filters("glow").strength = strengthIndex--; if(strengthIndex == 1) upDown = !upDown; counter++; glowSpan.filters("glow").color = parseInt(colorArray[counter % 6],16); if(strengthIndex == 10) } </script> </head>

<body style = "background-color:#00AAAA">
<h1><center>Glow Filter</center></h1> <table border = "1" style = "background-color:#CCFFCC" style="position:absolute;left:250;top:250;bottom:100"> <tr> <td>Color (Hex)</td> <td><input id = "glowColor" type = "text" size = "6" maxlength = "6" value = "FF0000"></td> </tr> <td>Strength(1-255)</td> <td><input id = "glowStrength" type = "text" size = "3" maxlength = "3" value = "5"></td> <td colspan = "2"> <input type = "button" value = "Apply" onclick = "apply()"> <input type = "button" value = "Run Demo" onclick = "startdemo()"> </td> </table>

<span id = "glowSpan" style = "position:
<span id = "glowSpan" style = "position: absolute;left:200;top:100;padding:5;filter:glow(color = red, strength = );font-size:2em">Glowing Text</span> </body> </html>

Creating Motion with blur
blur filter creates an illusion of motion by blurring text or images in a certain direction Add Adds a copy of the original image over the blurred image Direction Determines in which direction the blur filter is applied strength Determines how strong the blurring effect is

<html> <head> <title>Blur Filter</title> <script language="javascript"> var strengthIndex = 1; var blurDirection = 0; var upDown = 0; var timer; function reBlur() { blurImage.filters("blur").direction = document.forms("myForm").Direction.value; blurImage.filters("blur").strength = document.forms("myForm").Strength.value; blurImage.filters("blur").add = document.forms("myForm").AddBox.checked; }

function startDemo() { timer = window.setInterval("runDemo()",100); } function runDemo() document.forms("myForm").Strength.value = strengthIndex; document.forms("myForm").Direction.value = (blurDirection % 360); if(strengthIndex == 35 || strengthIndex == 0) upDown = !upDown; blurImage.filters("blur").strength = (upDown ? strengthIndex++ : strengthIndex--); if(strengthIndex == 0) blurImage.filters("blur").direction = ((blurDirection += 45) % 360); </script> </head>

<body> <form name = "myForm" action = ""> <table border = "1" style = "background-color:#CCFFCC"> <caption>Blur Filter Controls</caption> <tr> <td>Direction:</td> <td><select name = "Direction"> <option value = "0">above</option> <option value = "45">above-right</option> <option value = "90">right</option> <option value = "135">below-right</option> <option value = "180">below</option> <option value = "225">below-left</option> <option value = "270">left</option> <option value = "315">above-left</option> </select></td> </tr> <td>Strength:</td> <td><input name="Strength" size="3" type="text" maxlength="3" value="0"></td> <td>Add or Original?</td> <td><input type="checkbox" name="AddBox"></td></tr>

Multimedia

What is Multimedia? Multimedia comes in many different formats. It can be almost anything you can hear or see like text, pictures, music, sound, videos, records, films, animations, and more. On the Internet you can often find multimedia elements embedded in web pages, and modern web browsers have support for a number of multimedia formats. Multimedia Formats Multimedia elements (like sounds or videos) are stored in media files. The most common way to discover the media type is to look at the file extension. When a browser sees the file extensions .htm or .html, it will assume that the file is an HTML page. The .xml extension indicates an XML file, and the .css extension indicates a style sheet. Picture formats are recognized by extensions like .gif and .jpg. Multimedia elements also have their own file formats with different extensions like .swf, .wmv, .mp3, and .mp4. Video Formats Format File Description AVI .avi The AVI (Audio Video Interleave) format was developed by Microsoft. The AVI format is supported by all computers running Windows, and by all the most popular web browsers. It is a very common format on the Internet, but not always possible to play on non-Windows computers. WMV .wmv The Windows Media format is developed by Microsoft. Windows Media is a common format on the Internet, but Windows Media movies cannot be played on non-Windows computer without an extra (free) component installed. Some later Windows Media movies cannot play at all on non-Windows computers because no player is available

Format File Description MPEG .mpg .mpeg The MPEG (Moving Pictures Expert Group) format is the most popular format on the Internet. It is cross-platform, and supported by all the most popular web browsers. QuickTime .mov The QuickTime format is developed by Apple. QuickTime is a common format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed. RealVideo .rm .ram The RealVideo format was developed for the Internet by Real Media. The format allows streaming of video (on-line video, Internet TV) with low bandwidths. Because of the low bandwidth priority, quality is often reduced. Flash .swf .flv The Flash (Shockwave) format was developed by Macromedia. The Shockwave format requires an extra component to play. But this component comes preinstalled with web browsers like Firefox and Internet Explorer. Mpeg-4 .mp4 Mpeg-4 (with H.264 video compression) is the new format for the internet. In fact, YouTube recommends using MP4. YouTube accepts multiple formats, and then converts them all to .flv or .mp4 for distribution. More and more online video publishers are moving to MP4 as the internet sharing format for both Flash players and HTML5.

Sound Format Format File Description MIDI .mid .midi
The MIDI (Musical Instrument Digital Interface) is a format for electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital musical instructions (notes) that can be played by electronics (like your PC's sound card). Since MIDI format only contains instructions (notes), MIDI files are extremely small. The example above is only 23K in size but it plays for nearly 5 minutes. MIDI is supported by many software systems over a large range of platforms. MIDI is supported by all the most popular Internet browsers. RealAudio .rm .ram The RealAudio format was developed for the Internet by Real Media. The format also supports video. The format allows streaming of audio (on-line music, Internet radio) with low bandwidths. Because of the low bandwidth priority, quality is often reduced. Wave .wav The Wave (waveform) format is developed by IBM and Microsoft. It is supported by all computers running Windows, and by all the most popular web browsers (except Google Chrome). WMA .wma The WMA format (Windows Media Audio), compares in quality to MP3, and is compatible with most players, except the iPod. WMA files can be delivered as a continuous flow of data, which makes it practical for use in Internet radio or on-line music. MP3 .mp3 .mpga MP3 files are actually the sound part of MPEG files. The MPEG format was originally developed for video by the Moving Pictures Experts Group. MP3 is one of the most popular sound formats for music. The encoding system combines good compression (small files) with high quality. Expect future software systems to support it.

Adding Audio or Video with the embed Element
<audio controls="controls" height="100px" width="500px"> <source src="song.mp3" type="audio/mpeg" /> <source src="song.ogg" type="audio/ogg" /> <embed height="300px" width="500px" src="file:///c:/documents and settings/administrator/Desktop/11.mp3"/> <embed height="300px" width="500px" src="file:///c:/documents and settings/administrator/Desktop/22.wav"/> <embed height="300px" width="500px" src="file:///c:/documents and settings/administrator/Desktop/33.avi"/> <embed height="300px" width="500px" src="file:///c:/documents and settings/administrator/Desktop/44.mpg"/> </audio> Playing Audio and Video in HTML using object Tag or Using the Windows Media Player ActiveX Control The purpose of the <object> tag is to embed multimedia elements in HTML pages. The following code fragment displays a WAVE file embedded in a web page.

<OBJECT ID="MediaPlayer" WIDTH="400" HEIGHT="300" CLASSID="CLSID:22D6F B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject"> <PARAM NAME="FileName" VALUE="file:///c:/documents and settings/sakthiccet08/Desktop/11.mp3"> <PARAM name="autostart" VALUE="false"> <PARAM name="ShowControls" VALUE="true"> <param name="ShowStatusBar" value="true"> <PARAM name="ShowDisplay" VALUE="true"> </OBJECT> Playing Audio in Video HTML using object Tag and also using JavaScript <html> <head> <title>Playing Audio and Video in HTML using JavaScript</title> <script language="javascript"> function File_Movie(filename) { document.getElementById('VIDEO').URL = filename; }

function Play_Movie()
{ document.getElementById('VIDEO').controls.play(); } function Stop_Movie() document.getElementById('VIDEO').controls.stop(); function Pause_Movie() document.getElementById('VIDEO').controls.pause(); function Mute_Movie() document.getElementById('VIDEO').controls.mute(); </script> </head> <body> <OBJECT id="VIDEO" width="320" height="240" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" type="application/x-oleobject“>

<PARAM NAME="URL" VALUE="your file or url">
<PARAM NAME="SendPlayStateChangeEvents" VALUE="True"> <PARAM NAME="AutoStart" VALUE="flase"> <PARAM name="uiMode" value="none"> <PARAM name="PlayCount" value="9999"> </OBJECT> <pre> <form name="f1"> <select name="s11" onchange="File_Movie(filename)"> <option value=""></option> <option value="11.avi">11</option> <option value="12.avi">12</option> <option value="13.avi">13</option> <option value="14.avi">14</option> <option value="15.avi">15</option> </select> <input type="button" name="b11" value="Play" onclick="Play_Movie()"> <input type="button" name="b2" value="Stop" onclick="Stop_Movie()"> <input type="button" name="b3" value="Pause" onclick="Pause_Movie()"> <input type="button" name="b4" value="Mute" onclick="Mute_Movie()"> </form> </pre> </body> </html>

Code Parameters Description obj.Settings.autoStart true Specifies or retrieves a value indicating whether the current media item begins playing automatically. obj.Settings.baseURL Specifies the base URL used for relative path resolution with URL script commands that are embedded in media items. ClosedCaption.captioningID Specifies the name of the element displaying the captioning. obj.Controls.currentMarker Specifies the current marker number. obj.Controls.currentPosition Specifies the current position in the media item in seconds. obj.Settings.defaultFrame - Specifies the name of the frame used to display a URL. obj.enableContextMenu Specifies a value indicating whether to enable the context menu, which appears when the right mouse button is clicked. obj.enabled false Specifies whether the Windows Media Player control is enabled. obj.fullScreen Specifies whether video content is played back in full-screen mode.

Code Parameters Description obj.Settings.invokeURLs true Specifies a value indicating whether URL events should launch a Web browser. obj.Settings.mute false Specifies if audio is muted. obj.Settings.PlayCount 1 Specifies the number of times a media item will play. Minimum value of one. obj.Settings.rate 1.0 Specifies the playback rate. 0.5 equates to half the normal playback speed, 2 equates to twice. obj.stretchToFit Specifies whether video displayed by the control automatically sizes to fit the video window, when the video window is larger than the dimensions of the video image. obj.uiMode full Specifies which controls are shown in the user interface. Possible values: invisible, none, mini, full. obj.URL - Specifies the name of the media item to play. You can specify a local filename or a URL. obj.Settings.volume Last setting Zero specifies no volume and 100 specifies full volume.

Code Parameters Description Obj.Settings.balance False Set balance between left and right speakers. 0 is equal, -100 is full left and 100 is full right Obj.windowlessVideo Specifies or retrieves a value indicating whether the windows Media Player control renders video in windowless mode. When windowlessVideo is set to true, the Player control renders video directly in the client area, so you can apply special effects or layer the video text. Play Audio and Video Using A Hyperlink If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file. The following code fragment displays a link to an MP3 file. If a user clicks on the link, the browser will launch a helper application to play the file: <html> <head> <title>Playing Audio and Video using Hyperlinks</title> </head> <body> <a href="song.mp3">Play the song</a> <a href=“chettinad.avi”>Play the Video</a> </body> </html>

Adding Background Sounds with the bgsound Element
<html> <head> <title>Adding Background Sounds with the bgsound Element</title> </head> <body bgcolor="blue"> <h1><center>Adding Background Sounds with the bgsound Element</center></h1> <bgsound src="file:///z:/chettinad.wav" loop = 5> <bgsound src="file:///z:/chettinad.mp3" loop = infinite> <bgsound src=“file:///z:/chettinad.mid” loop = 2> </body> </html>

Adding Video with the img Element’s dynsrc property
<html> <head> <title>Adding Video with the img Element's dynsrc Property</title> </head> <body bgcolor="blue"> <h1><center>Adding Video with the img Element's dynsrc Property</center></h1> <img dynsrc="chettinad.avi" height="500" width="300" loop="5"> <img dynsrc="chettinad.dat" height="500" width="300" loop="infinite"> <img dynsrc="chettinad.mpg height="500" widht="300" loop="10"> </body> </html>

Playing Audio and Video File using Real Audio and Video Player
<html> <head> <title>Audio and Vedio using Real Audio</title> <script type = "text/javascript"> var locations = [ "file:///c:/documents and settings/sakthiccet08/Desktop/11.avi", "file:///c:/documents and settings/sakthiccet08/Desktop/11.mp3"]; function change( loc ) { document.getElementById('videoControl').URL = locations(loc); document.getElementById('videoControl').controls.play(); } </script> </head> <body> <p>Pick from my favorite Video and Audio Streams: <select id = "streamSelect" onchange = "change( this.value )"> <option value = "">Select a station</option> <option value = "0">AVI</option> <option value = "1">MP3</option> </select></p>

Playing Background Audio File using JavaScript
<embed id = "videoControl" src = "" type = "audio/x-pn-realaudio-plugin" width = "275" height = "200" controls = "ImageWindow" console = "streamingMedia" autostart = "false" /> <embed id = "audioControl" src = "" type = "audio/x-pn-realaudio-plugin" width = "275" height = "40" controls = "Default" console = "streamingMedia" autostart = "false" /> </body> </html> Playing Background Audio File using JavaScript <html> <head> <title>The bgsound Element</title> <bgsound id = "audio" src = "file:///c:/documents and settings/sakthiccet08/Desktop/ring.wav" loop = "1"></bgsound> <script type = "text/javascript"> function changeProperties() { var loop = parseInt( audioForm.loopit.value ); if ( ( loop >= -1 ) ) audio.loop = ( isNaN( loop ) ? 1 : loop ); }

else { alert( "Please enter a integer\n" + "greater than or equal to -1." ); } var vol = parseInt( audioForm.vol.value ); if ( ( vol >= ) && ( vol <= 0 ) ) audio.volume = ( isNaN( vol ) ? 0 : vol ); alert( "Please enter an integer\n" + "between and 0." ); function stopSound() if ( audioForm.stopButton.value == "Stop Sound" ) audio.src = ""; audioForm.stopButton.value = "Start Sound";

else { audio.src = "file:///c:/documents and settings/sakthiccet08/Desktop/ring.wav"; audioForm.stopButton.value = "Stop Sound"; } </script> </head> <body> <h1>Background Music via the bgsound Element</h1> <h2>Chettinad Group of Institutions</h2> <hr /> Use the fields below to change the number of iterations and the volume for the audio clip<br /> Press <strong>Stop</strong> to stop playing the sound.<br /> Press <strong>Refresh</strong> to begin playing the sound again. <form name = "audioForm" action = ""> <p>Loop [-1 = loop forever]</p> <input name = "loopit" type = "text" value = "1" /><br /> Volume [ (low) to 0 (high)]

<input name = "vol" type = "text" value = "0" /><br />
<input type = "button" value = "Set Properties" onclick = "changeProperties()" /> <input type = "button" value = "Stop Sound" id = "stopButton" onClick = "stopSound()" /> </form> </body> </html>

Data binding with Tabular Data Control

Advantages of Data Binding
– Data no longer reside exclusively on the server – Data can be maintained on the client – Eliminate server activity and network delays Data Source Objects (DSOs) – Tabular Data Control (TDC) Simple Data Binding Data file – Header row • Specifies the names of the columns below – Text qualifiers ) • Enclose data in each field – Field delimiter ( | ) • Separate each field – Recordset

Create HTMLStandardColors.txt – Text File

<html> <head> <title>Introduction to Data Binding</title> <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> <param name = "DataURL" value = "HTMLStandardColors.txt"> <param name = "UseHeader" value = "TRUE"> <param name = "TextQualifier" value = <param name = "FieldDelim" value = "|"> </object> <script language = "javascript"> var recordSet = Colors.recordset; function displayRecordNumber() { if(!recordSet.EOF) recordNumber.innerText = recordSet.absolutePosition; else recordNumber.innerText = " "; }

function forward() { recordSet.MoveNext(); if(recordSet.EOF) recordSet.MoveFirst(); document.getElementById('colorSample').style.backgroundcolor = colorRGB.innerText; displayRecordNumber(); } </script> </head> <body id = "cs" onload = "displayRecordNumber()" onclick = "forward()"> <h1> XHTML Color Table </h1> <h3> Click anywhere in the browser window to move forward in the recordset. </h3 <p><strong>Color Name: </strong> <span id = "colorid" datasrc = "#Colors" datafld = "ColorName"></span><br>

<strong>Color RGB Value: </strong>
<span id = "colorRGB" datasrc = "#Colors" datafld = "ColorHexRGBValue"></span><br> Currently viewing record number <span id = "recordNumber" style = "font-weight:900"></span><br> <span id = "colorSample" style = "background color:aqua;color:888888;font-size:30pt">Color Sample</span></p> </body></html>

Moving within a Recordset
<html> <head> <title>Moving Within a Record Set</title> <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> <param name = "DataURL" value = "HTMLStandardColors.txt"> <param name = "UseHeader" value = "TRUE"> <param name = "TextQualifier" value = <param name = "FieldDelim" value = "|"> </object> <script language = "javascript"> var recordSet = Colors.recordset; function move(whereTo) { switch(whereTo) case "first": recordSet.MoveFirst(); break;

case "previous": recordSet.MovePrevious(); if (recordSet.BOF) recordSet.MoveLast(); break; case "next": recordSet.MoveNext(); if(recordSet.EOF) recordSet.MoveFirst(); case "last": } </script> <style type = "text/css"> input {background-color:khaki;color:green;font-weight:bold} </style> </head>

<body style = "background-color:darkkhaki">
<h1 style = "color:black" id = "h1Title">XHTML Color Table</h1> <span style = "position:absolute;left:200;width:270;border- style:groove;text-align:center;background-color:cornsilk;padding:10"> <strong>Color Name: </strong> <span id = "colorName" style = "font-family:monospace" datasrc = "#Colors" datafld = "ColorHexRGBValue">ABC</span><br> <strong>Color RGB Value: </strong> <span id = "colorRGB" style = "font-family:monospace" datasrc = "#Colors" datafld = "ColorHexRGBValue">ABC</span></br> <input type="button" value="First" onclick = "move('first');"> <input type="button" value="Previous" onclick = "move('previous');"> <input type="button" value="Next" onclick = "move('next');"> <input type="button" value="Last" onclick = "move('last');"> </span> </body> </html>

First Record Next Record Last Record Previous Record

Binding to an img Creating Image file i.e. Images.txt <html> <head> <title>Binding to an Image</title> <object id = "Images" classid = "CLSID:333C7BC4-460F D0-BC C7055A83"> <param name = "DataURL" value = "Images.txt"> <param name = "UseHeader" value = "TRUE"> </object> <script language = "javascript"> var recordSet = Images.recordset;

function move(whereTo)
{ switch(whereTo) case "first": recordSet.MoveFirst(); break; case "previous": recordSet.MovePrevious(); if (recordSet.BOF) recordSet.MoveLast(); case "next": recordSet.MoveNext(); if(recordSet.EOF) case "last": } </script> </head>

First Record Next Record Previous Record Last Record

Binding to a table <html> <head> <title>Data Binding and Tables</title> <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D BC C7055A83"> <param name = "DataURL" value = "HTMLStandardColors.txt"> <param name = "UseHeader" value = "TRUE"> <param name = "TextQualifier" value = <param name = "FieldDelim" value = "|"> </object> </head> <body style = "background-color:darkseagreen"> <h1>Binding Data to a Table</h1> <table datasrc = "#Colors" style = "border-style:ridge;border color:darkseagreen;background-color:lightcyan"> <thead> <tr style = "background-color:mediumslateblue"> <th>Color Name</td> <th>Color RGB Value</th> </tr> </thead>

Sorting table Data <html> <head> <title>Sorting the Data in Tables</title> <object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC C7055A83"> <param name = "DataURL" value = "HTMLStandardColors.txt"> <param name = "UseHeader" value = "TRUE"> <param name = "TextQualifier" value = <param name = "FieldDelim" value = "|"> </object> </head> <body style = "background-color:darkseagreen"> <h1>Binding Data to a Table</h1> <table datasrc = "#Colors" style = "border-style:ridge;border color:darkseagreen;background-color:lightcyan">

<caption>Sort By:
<select onchange = "Colors.Sort = this.value;Colors.Reset();"> <option value = "ColorName">Color Name (Ascending)</option> <option value = "-ColorName">Color Name (Descending)</option> <option value = "ColorHexRGBValue">Color RGB Value (Ascending)</option> <option value = " ColorHexRGBValue">Color RGB Value (Descending)</option> </select> </caption> <thead> <tr style = "background-color:mediumslateblue"> <th>Color Name</td> <th>Color RGB Value</th> </tr> </thead>

ActiveX – Structured Graphics Control

The Structured Graphics Control is primarily for visual presentations
The Structured Graphics Control is primarily for visual presentations. It is a Web interface for the DirectAnimation subset of Microsoft’s DirectX software (used, for example, in video games). The Structured Graphics Control (like TDC) is an ActiveX control added to a page with an OBJECT tag – now placed in the body (not the heading as with TDC). The value of the CLASSID attribute for Structured Graphics Control is CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6. The value of the NAME attribute of the parameters in the OBJECT element are Line0001, Line0002, Line0003, …. The value of the VALUE attribute of a parameter is a method invocation. Method invocations in parameters are executed in the order of their associated NAME values: The invocation associated with Line0001 is executed first, then the one associated with Line0002, then the one associated with Line0003, etc. One method invocation can undo the effect of a previous one. A Structured Graphics Control object occupies a screen area with definite dimensions. These are specified by the height and weight properties of the STYLE attribute. Example: <BODY> <OBJECT ID = "lines“ STYLE = "border-style: groove; width:300; height: 200“ CLASSID = "CLSID:369303C2-D7AC- 11d0-89D5- 00A0C90833E6"> <PARAM NAME = "Line0001“ VALUE = "SetLineColor( 0, 0, 0 )"> <PARAM NAME = "Line0002“ VALUE = "SetLineStyle( 2, 1 )"> … … … </OBJECT> </BODY>

Methods for Lines SetLineColor( red, green, blue ) sets the color of lines and borders. red, green, blue: RGB strengths in decimal (0-255) SetLineStyle( line_style, line_width ) sets the style and width of lines and borders. line_style: 0 (no lines or borders), 1 (default: solid), 2 (dashed) line_width: in pixels. Dashed lines require width 1. The origin of the coordinate system of the control (the screen area occupied by the object) is the center of the control, not the upper-left corner of the screen. Every graphical element has a surrounding box. When you specify coordinates for an element, these are the coordinates of the upper-left corner of the box. Unless otherwise stated, dimensions are in pixels. PolyLine( n, x1, y1, x2, y2, …, xn, yn ) draws n-1 lines, connecting (xi, yi) with (xi+1, yi+1), 1 £ i £ n-1. A single line has n = 2. Arc( x, y, box_width, box_height, start_angle, arc_size, rotation ) creates an arc. x, y: coordinates of the upper-left corner of the arc’s box box_width, box_height: the height and width of the box start_angle: the angle (in degrees counterclockwise from a ray in the positive x direction) where the arc starts. arc_size: the length of the arc (in degrees counterclockwise from where the arc starts), rotation: the clockwise rotation (in degrees) of the entire arc.

Example: <OBJECT ID = "lines“ STYLE = "border-style: groove; width: 300; height: 200“ CLASSID = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <PARAM NAME = "Line0001“ VALUE = "SetLineColor( 0, 0, 0 )"> <PARAM NAME = "Line0002“ VALUE = "SetLineStyle( 2, 1 )"> <PARAM NAME = "Line0003“ VALUE = "PolyLine( 2, -140, 0, -10, 0 )"> <PARAM NAME = "Line0004“ VALUE = "PolyLine( 2, 0, 0, 0, 90 )"> <PARAM NAME = "Line0005“ VALUE = "SetLineStyle( 1, 3 )"> <PARAM NAME = "Line0006“ VALUE = "PolyLine( 5, 75, 0, 50, 25, 75, 75, 125, 25, 85, 10 )"> <PARAM NAME = "Line0007“ VALUE = "SetLineStyle( 1, 1 )"> <PARAM NAME = "Line0008“ VALUE = "Arc( -140, -90, 50, 100, 90, 270, 0 )"> <PARAM NAME = "Line0009“ VALUE = "Arc( -50, -90, 75, 75, 0, 90, 0 )"> <PARAM NAME = "Line0010“ VALUE = "Arc( 60, -100, 75, 75,0, 90, 90 )"> </OBJECT> Output

Methods for Shapes The methods SetLineColor and SetLineStyle are also needed for 2D shapes: they specify properties of shape borders. SetFillColor( red, green, blue ) sets the color for filling shapes and text. red, green, blue: RGB strengths in decimal (0-255) SetFillStyle ( style ) sets the style for filling shapes and text. style is a number 0-14 specifying the fill style as follows: Number Fill Style None 1 Solid Fill 2 3 Horizontal lines 4 Vertical lines 5 Diagonal lines 6 7 Cross-hatch Number Fill Style 8 Diagonal cross-hatch 9 Horizontal gradient 10 Vertical gradient 11 Circular gradient 12 Line gradient 13 Rectangular gradient 14 Shaped gradient

SetTexture( x, y, “URL”, tile ) uses the image at URL for filling shapes and text. x, y: the origin within the shape where the texture begins tile: 1 if the image fills the shape by tiling, 0 if by stretching If you use SetTexture, you needn’t use SetFillColor or SetFillStyle. Polygon( n, x1, y1, x2, y2, …, xn, yn ) creates an n-gon with vertices (xi, yi), 1 £ i £ n. This is like PolyLine but includes an edge ((xn,yn), (x1,y1)), thus closing off an interior. Pie( x, y, box_width, box_height, start_angle, arc_size, rotation ) is just like Arc but fills the arc with the fill color, creating a pie-slice shape. Oval( x, y, width, height, angle ) places at (x, y) an oval with height height and width width at angle degrees clockwise rotation. Rect( x, y, width, height, angle ) places at (x, y) a rectangle with height height and width width at angle degrees clockwise rotation. RoundRect( x, y, width, height, corner_width, corner_height, angle ) is like Rect but rounds the corners of the rectangle. x, y, width, height, angle: as with Rect corner_width, corner_height: the width and height of the rounded corners.

Methods for Text The methods SetLineColor and SetLineStyle are also needed for text: they specify properties of character borders. One should also use either SetTexture alone or SetFillColor and SetFillStyle together for text: they specify how the interiors of characters are filled. SetFont( “font_face”, height, boldness, italic, underline, strikethrough ) sets the font style used when text is placed. font_face: the font face height: the height of the text in points boldness: the text boldness ( ), like the CSS fontweight property italic, underline, strikethrough: 1 if the text is, respectively, italic, underline, or strikethrough; 0 if it isn’t Text( “text”, x, y, angle ) places text at (x, y) at angle degrees clockwise rotation. Example: The following creates two Structured Graphics Control objects. The first object contains a large ellipse and a large rectangle, both filled by tiling an image of bars from a file. The second object contains various shapes and some text filled with solid gray. <BODY> <OBJECT ID = "shapes” STYLE = "border-style: groove; width: 400; height: 200“ CLASSID = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">

<PARAM NAME = "Line0001“ VALUE = "SetLineColor( 0, 0, 0 )">
<PARAM NAME = "Line0002“ VALUE = "SetLineStyle( 1, 1 )"> <PARAM NAME = "Line0003“ VALUE = "SetTextureFill( 0, 0, 'Bars1.bmp', 1 )"> <PARAM NAME = "Line0004“ VALUE = "Oval( -190, -80, 175, 150, 0 )"> <PARAM NAME = "Line0005“ VALUE = "Rect( 10, -80, 175, 150, 0 )"> </OBJECT> <OBJECT ID = "moreShapes“ STYLE = "border-style: groove; width: 400; height: 200“ CLASSID = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <PARAM NAME = "Line0001“ VALUE = "SetLineColor( 0, 0, 0 )"> <PARAM NAME = "Line0002“ VALUE = "SetLineStyle( 1, 1 )"> <PARAM NAME = "Line0003“ VALUE = "SetFillColor( 200, 200, 200 )"> <PARAM NAME= "Line0004“ VALUE = "SetFillStyle( 1 )"> <PARAM NAME= "Line0005“ VALUE = "Polygon( 3, -190, -10, -70, -10, -130, -90 )"> <PARAM NAME= "Line0006“ VALUE = "Pie( -90, -90, 150, 150, 60, )"> <PARAM NAME= "Line0007“ VALUE = "RoundRect( 70, -80, 75, 110, 30, 60, 30 )"> <PARAM NAME= "Line0008“ VALUE = "SetFont( 'Courier', 20, 400, 0, 0, 0 )"> <PARAM NAME = "Line0009“ VALUE = "Text( 'SOME', -40, 95, -30 )"> <PARAM NAME = "Line0010“ VALUE = "Text( 'TEXT', 0, 95, -30 )"> </OBJECT> </BODY>

Output

Translating, Rotating, and Scaling Objects
Certain linear transformations can be applied to the entire control area of a Structured Graphics Control object. To apply transformations to the elements within the control area, use scripting on the properties of the CSS style property of the element – e.g., ele.style.top += y_incr; In the following, let object be a Structured Graphics Control object. object.Translate( x, y, z ) translates the entire control area of object x pixels right and y pixels down. This does not distort the elements within object. The value of z normally has no effect. object.Rotate( x, y, z ) rotates the entire control area of object x, y, z degrees clockwise about the x-, y-, and zaxes, respectively. Non-zero rotations about the x- and y-axes distort elements. Not so for non-zero rotations about the z-axis. object.Scale( x, y, z ) shrinks/expands the entire control area of object by x percent horizontally (with the y-axis fixed) and by y percent vertically (with the x-axis fixed). This always distorts (in the obvious way) elements within object The value of z normally has no effect.

Example: The following page creates three Structured Graphics Control objects, left, middle, and right. Their control areas are on top of one another. Each contains a 70 ´ 80 rectangle: · left has it in the top left, · middle has it in the middle, and · right has it in the top right. When the screen is clicked, · left translates down 5 pixels, · middle rotates 3 degrees counterclockwise about the z-axis, and · right is shrunk down to 95% of its horizontal dimension. These effects accumulate as the screen is clicked repeatedly. <HTML> <HEAD> <TITLE>Shapes</TITLE> <SCRIPT LANGUAGE = "JavaScript"> function change() { left.Translate( 0, 5, 0 ); middle.Rotate( 0, 0, -3 ); right.Scale( 0.95, 1, 1 ); } </SCRIPT> </HEAD>

<BODY ONCLICK = "change()">
<OBJECT ID = "left“ STYLE = "position: absolute; width: 500; height: 200“ CLASSID = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <PARAM NAME = "Line0001“ VALUE = "SetLineColor( 0, 0, 0 )"> <PARAM NAME = "Line0002“ VALUE = "SetLineStyle( 1, 1 )"> <PARAM NAME = "Line0003“ VALUE = "SetFillColor( 200, 200, 200 )"> <PARAM NAME= "Line0004“ VALUE = "SetFillStyle( 1 )"> <PARAM NAME= "Line0005“ VALUE = "Rect( -180, -80, 70, 80, 0 )"> </OBJECT> <OBJECT ID = "middle“ STYLE = "position: absolute; width: 500; height: 200“ CLASSID ="CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <PARAM NAME= "Line0004“ VALUE = "SetFillStyle( 1 )"> <PARAM NAME= "Line0005“ VALUE = "Rect( -35, -40, 70, 80, 0 )"> <OBJECT ID = "right“ STYLE = "position: absolute; width: 500; height: 200“ CLASSID = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <PARAM NAME = "Line0001“ VALUE = "SetLineColor( 0, 0, 0 )"> <PARAM NAME = "Line0002“ VALUE = "SetLineStyle( 1, 1 )"> <PARAM NAME = "Line0003“ VALUE = "SetFillColor( 200, 200, 200 )">

<PARAM NAME= "Line0004“ VALUE = "SetFillStyle( 1 )">
<PARAM NAME= "Line0005“ VALUE = "Rect( 80, -80, 70, 80, 0 )"> </OBJECT> </BODY> </HTML>

External Source Files We can keep a sequence of method invocations in a separate source file (a .txt file). When the URL of the source file is assigned to the SourceURL property of a Structured Graphics Object, the method invocations are executed. When this happens, · any elements previously placed in the object (e.g., lines or shapes) and · any settings previously in force for the object (e.g., line color or fill style) are cleared. Such elements and settings were established either · with parameters in the OBJECT element or · by assigning the URL of another external source file to the SourceURL property of the Structured Graphics Control object. An external source file can also be used by having a parameter in the OBJECT element whose NAME is “SourceURL” and whose VALUE attribute value is the URL of the file – e.g., <PARAM NAME = "SourceURL“ VALUE = "lines_src.txt"> (Here the NAME value is not of the form “LineNNNN”.) Note: The first line of an external source file must not be blank. If it is, nothing is rendered.

Example: Here we partition the lines produced in our first Structured Graphics Control example into three sets. · The dashed lines in the lower left are established with parameters in the OBJECT element in the page. · The line in the lower right, consisting of several joined line segments, is specified on the external source file lines_src1.txt. · The arcs in the upper half are specified in the external source file lines_src2.txt. The first set of lines appears when the page is loaded. The second set appears when the window is clicked the first time. The third set appears when the window is clicked the second time. Further clicking does not produce any changes. The file lines_src1.txt is: SetLineColor( 0, 0, 0 ) SetLineStyle( 1, 3 ) PolyLine( 5, 75, 0, 50, 25, 75, 75, 125, 25, 85, 10 ) The file lines_src2.txt is: SetLineStyle( 1, 1 ) Arc( -140, -90, 50, 100, 90, 270, 0 ) Arc( -50, -90, 75, 75, 0, 90, 0 ) Arc( 60, -100, 75, 75, 0, 90, 90 )

<HTML> <HEAD> <TITLE>External Source Files</TITLE> <SCRIPT> sourceCount = 1; function getSource() { if ( sourceCount == 1 ) lines.SourceURL = "lines_src1.txt"; else if ( sourceCount == 2 ) lines.SourceURL = "lines_src2.txt"; sourceCount ++; } </SCRIPT> </HEAD> <BODY ONCLICK = "getSource()"> <OBJECT ID = "lines“ STYLE = "border-style: groove; width: 300; height: “ CLASSID = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6"> <PARAM NAME = "Line0001“ VALUE = "SetLineColor( 0, 0, 0 )"> <PARAM NAME = "Line0002“ VALUE = "SetLineStyle( 2, 1 )"> <PARAM NAME = "Line0003“ VALUE = "PolyLine( 2, -140, 0, -10, 0 )"> <PARAM NAME = "Line0004“ VALUE = "PolyLine( 2, 0, 0, 0, 90 )"> </OBJECT> </BODY> </HTML>

Mouse Events The structured Graphics Control can process any of the events ONMOUSEMOVE ONMOUSEDOWN ONMOUSEUP ONMOUSEOVER ONMOUSEOUT ONCLICK ONDBCLICK To conserve processor time, the Structured Graphics Control by default doesn’t capture these events. To have it capture them, include a parameter with NAME “MouseEventsEnabled” and VALUE “1”. Example: The following creates an object that includes a black circle. When the mouse cursor moves over the circle, it is translated right slightly. When the mouse cursor moves out of the circle, it is translated back to its original position. Note that these mouse events are defined for the mouse moving over or out of the circle, not the entire control area of the Structured Graphics Control object.

<HTML> <HEAD> <TITLE>Mouse Events</TITLE> <SCRIPT FOR = "ball" EVENT = "onmouseover“ LANGUAGE = "JavaScript"> ball.Translate( 15, 0, 0 ); </SCRIPT> <SCRIPT FOR = "ball" EVENT = "onmouseout“ LANGUAGE = "JavaScript"> ball.Translate( -15, 0, 0 ); </HEAD> <BODY> <OBJECT ID = "ball“ STYLE = "width: 140; height: 140; border-style: groove; position: absolute; top: 10; left: 10;“ CLASSID = "clsid:369303C2-D7AC d0-89D5-00A0C90833E6"> <PARAM NAME = "Line0001“ VALUE = "SetLineColor( 0, 0, 0 )"> <PARAM NAME = "Line0002“ VALUE = "SetLineStyle(0)"> <PARAM NAME = "Line0003“ VALUE = "SetFillColor( 0, 0, 0 )"> <PARAM NAME = "Line0004“ VALUE = "SetFillStyle( 1 )"> <PARAM NAME = "Line0005“ VALUE = "Oval( -50, -50, 100, 100 )"> <PARAM NAME = "MouseEventsEnabled“ VALUE = "1"> </OBJECT> </BODY></HTML>

The following is the rendering initially and after the mouse cursor has been moved over and out of the circle any number of times.

DHTML DYNAMIC HYPER TEXT MARKUP LANGUAGE

Similar presentations

Presentation on theme: "DHTML DYNAMIC HYPER TEXT MARKUP LANGUAGE"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

DHTML DYNAMIC HYPER TEXT MARKUP LANGUAGE

Similar presentations

Presentation on theme: "DHTML DYNAMIC HYPER TEXT MARKUP LANGUAGE"— Presentation transcript:

Similar presentations

About project

Feedback