dhtml - chettinadtech.ac.inchettinadtech.ac.in/storage/11-10-01/11-10-01-07-07-48-1037... · dhtml...

9/21/2011

1

DHTMLDYNAMIC HYPER TEXT MARKUP

LANGUAGE

DHTML = XHTML + CSS + JAVASCRIPT + DOM

1

1. 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.

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. 2

9/21/2011

2

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. 3

4. What are the differences between XHTMLand DHTML?

1.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

2.Both were created to provide additional features and interactivity to XHTML

3.DHTML still uses XHTML at its core and is plagued with XHTML related problems

4.XHTML is more streamlined and easier to code with because of its conformance to

XML.

5.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.4

9/21/2011

3

<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!5

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>


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> 6

9/21/2011

4

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;”>7

When the page is loaded, this calls child, passing it the second object in the hierarchy. (The first

element is the comment at the top of the file.) When control returns from the call, the string in

global variable elements (containing the hierarchical description of the obects) is appended to the

value of the outerHTML property of P element myDisplay. Property outerHTML is like

innerHTMLbut includes the enclosing tags.



<head>

<title>Object Model</title>


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>8

9/21/2011

5

<body onload = "child( document.all[ 1 ] ); 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:

·HTML

·HEAD

· TITLE

· SCRIPT

· BODY

· P

· STRONG

· 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 fontFamily9

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"> XXX </p>

and in the script we have

pText1.style.left = 100;

Then the rendering XXX 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">CCC</p>

in the style sheet we have defined

.bigText { font-size: 2em }

and in the script we have

pText2.className = "bigText";

Then the rendering of XXX will be twice as large as the surrounding text.

10

9/21/2011

6

<html>

<head>

<title>Dynamic Styles</title>

<style type = "text/css">

.bigText { font-size: 2em }

</style>


function start()

{

alert( "Go!" );

document.body.style.fontSize = 16;

pText1.style.left = 100;

pText2.className = "bigText";

}

</script>

</head>


<p id = "pText1“ STYLE = "position: absolute; top: 35"> XXX</p>

<p id = "pText2">CCC</p>

</body>

</html> 11

12

9/21/2011

7

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 );

13

<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>14

9/21/2011

8

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.

Example

parent.frames( “lower” ).document.writeln( “<p>lower</p>” ); 15

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:

<html>

<head>

<title>The frames collection</title>


function start()

{

parent.frames( "lower" ).document.write(

"<p>lower</p>" );

}

</script>

</head>


<p>upper</p>

</body>

</html>

16

9/21/2011

9

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.17

<html>

<head>

<script language=“javascript”>

function start()

{

if ( navigator.appName == "Microsoft Internet Explorer" )

{

if ( navigator.appVersion.substring(1,0) >= "4" )

document.location = "newIEversion.html";

else

document.location = "oldIEversion.html";

}

else

document.location = "NSversion.html“;

}

<script>

<body>

<input type=“button” name=“b1” value=“Click Navigator Object”

onclick=“start()”>

</body>

</html> 18

9/21/2011

10

Object Model and Collections

19

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.

20

9/21/2011

11

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 keystroke21

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

Basic Category of Events

1. Clipboard Events

2. Data binding Events

3. Keyboard Events

4. Marquee Events

5. Miscellaneous Events

Some Events of DHTML

22

9/21/2011

12

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>


function Click_Event()

{

alert("The alert box is Clicked the Inner Html is changed");

para.innerHTML = "Chettinad College of Engineering and

Technology";

}

</script>

</head>23

<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>


function Load_Event()

{

alert("The alert box is Clicked the Inner Html is

changed");

para.innerHTML = "Chettinad College of Engineering

and Technology";

}

</script>

</head>24

9/21/2011

13

<body onload=“Load_Event()">

<form name = "f1">

<p id="para">Welcome</p>

</form

</body>

</html>

<html>

<head>


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>

Onerror - Event

25

OnMouseMove – Event

<html>

<head>


function MouseMove_Event()

{

alert("Move on the Image immediately another

Image is displayed");

document.body.background = "file:///z:/22.gif";

}

</script>

</head>

<body>


onmousemove="MouseMove_Event()">

</body>

</html>26

9/21/2011

14

OnMouseOver and OnMouseOut - Event

<html>

<head>


function MouseOver_Event()

{

document.body.background = "file:///z:/22.gif";

}

function MouseOut_Event()

{

document.body.background = "";

}

</script>

</head>

<body>


onmousemove="MouseOver_Event()" onmouseout="MouseOut_Event()">

</body>

</html>27

OnFocus and OnBlur - Event

<html>

<head>


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()">


onblur="OnBlur_Event()">

</form>

</body>

</html>28

9/21/2011

15

OnSubmit and OnReset - Event

<html>

<head>


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>29

<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> 30

9/21/2011

16

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> 31

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” onfinish="Marquee_Finish()">Welcome to

CCET</marquee>

</body>

</html> 32

9/21/2011

17

Marquee – OnBounce Event

<html>

<head>


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>

33

OnSelect - Event

<html>

<head>


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>34

9/21/2011

18

<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>


</form>

</body>

</html>

<html>

<head>


function OnSelect_Event()

{

f1.t1.value = "Welcome to CCET";

}

</script>

</head>

OnSelect - Event

35

<body>

<form name="f1">



onselect="OnSelect_Event()">

</form>

</body>

</html>

36

9/21/2011

19

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:37

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>38

9/21/2011

20

<body>

<form name="f1">

<input class="ip1" type="button" name="b1" value="Button1">




</form>

</body>

</html>

39

Filters and Transitions

• Filters

– 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"> 40

9/21/2011

21

<tr>

<td><font size="30" color="red">CCET</font></td>

<td style="filter:fliph"><font size="30"

color="red">CCET</font></td>

</tr>

<tr>

<td style="filter:fliph flipv"><font size="30"


<td style="filter:flipv"><font size="30"


</tr>

</table></center>

</body>

</html> Output

41

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 Filters</title><script language="javascript">

function changecolor(thecolor){

if(thecolor){

chromaimg.filter('chorma').color = thecolor;chromaimg.filter('chorma').enabled = true;

}else

chromaimg.filter('chroma').enabled = false;}

</script><head><body>

42

9/21/2011

22

<h1>Chorma Filters</h1><img id="chromaimg" src="file:///z:/44.jpg" style="position:absolute;

filter:chorma" alt="Transparent Image"><form name="f1">

<select onchange = "changecolor(this.value)"><option value = "">None</option><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

43

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>44

9/21/2011

23

<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>

<tr><td align="center">XRAY</td><td align="center">Invertor</td>

</tr>

<tr><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></tr>

</table></center>

</body></html>

45

Output

46

9/21/2011

24

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>

47

Adding Shadow to Text

• shadow filter

– Showing effect

• Three-dimensional appearance

<html>

<head>

<title>Shadow Filter</title>


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>48

9/21/2011

25


<h1 id = "shadowText" style = "position:absolute;

top:25;left:25;padding:100;filter:shadow(color = red)">Shadow Direction:

0</h1>

</body>

</html>

49

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 freq 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 an y 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.

50

9/21/2011

26

<html>

<head>

<title>Wave Filter</title>


var wavePhase = 0;

function start()

{

window.setInterval("wave()",10);

}

function wave()

{

wavePhase++;

flag.filters("wave").phase = wavePhase;

}

</script>

</head>


<span id = "flag"

style="align:center;position:absolute;left:30;padding:15;filter:wave(add=0,frea = 1,phase = 0

strength = 10);font-size:2em">Here is some Waaaavy Text</span>

</body>

</html>

51

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)52

9/21/2011

27

<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(0 - 100):</td><td><input type = "text" id = "opacityButton" size =

"3" maxlength = "3" value = "100"></td></tr>

53

<tr><td>FinishOpacity(0 - 100):</td><td><input type = "text" id = "opacityButton2" size =

"3" maxlength = "3" value = "0"></td></tr><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>

</tr><tr>

<td align = "center" colspan = "2"><input type = "button" value = "Apply"

onclick = "run()"></td>

</tr></table> </body> </html>

54

9/21/2011

28

55

Making Text glow

• glow filter adds an aura of color around text

<html>

<head>

<title>Glow Filter</title>


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);

}56

9/21/2011

29

function rundemo()

{

if(upDown)

{


strengthIndex++;

}

else

{


strengthIndex--;

}

if(strengthIndex == 1)

{

upDown = !upDown;

counter++;

glowSpan.filters("glow").color =

parseInt(colorArray[counter % 6],16);

}

if(strengthIndex == 10)

{

upDown = !upDown;

}

} </script> </head>57

<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>

<tr>

<td>Strength(1-255)</td>

<td><input id = "glowStrength" type = "text" size =

"3" maxlength = "3" value = "5"></td>

</tr>

<tr>

<td colspan = "2">

<input type = "button" value = "Apply"

onclick = "apply()">

<input type = "button" value = "Run Demo"

onclick = "startdemo()">

</td>

</tr>

</table>58

9/21/2011

30

<span id = "glowSpan" style = "position:

absolute;left:200;top:100;padding:5;filter:glow(color = red, strength =

5);font-size:2em">Glowing Text</span>

</body>

</html>

59

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

60

9/21/2011

31

<html><head>

<title>Blur Filter</title>


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;

}

61

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>

62

9/21/2011

32

<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><tr>

<td>Strength:</td><td><input name="Strength" size="3" type="text" maxlength="3" value="0"></td>

</tr><tr>

<td>Add or Original?</td><td><input type="checkbox" name="AddBox"></td></tr>

63

<tr><td align = "center" colspan = "2"><input

type="button" value="Apply" onclick="reBlur()"></td></tr>

<tr><td colspan = "2"><input type="button" value = "Start Demo" onclick = "startDemo()"><input type = "button" value="Stop demo" onclick = "window.clearInterval(timer);"></td>

</tr></table>

<div id = "blurImage" style = "position:absolute; top:100;left:500;padding:0;filter:blur(add = 0, direction = 0; strength = 0);background-color:red"><img align = "middle" src = "shapes.gif" alt =

"Shapes"></div>

</form></body>

</html>64

9/21/2011

33

65

Multimedia

66

9/21/2011

34

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 available67


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.

68

9/21/2011

35


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.

Sound Format

69

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"/>


settings/administrator/Desktop/22.wav"/>


settings/administrator/Desktop/33.avi"/>


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.

70

9/21/2011

36

<OBJECT ID="MediaPlayer" WIDTH="400" HEIGHT="300" CLASSID="CLSID:22D6F312-

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>


function File_Movie(filename)

{

document.getElementById('VIDEO').URL = filename;

}71

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“> 72

9/21/2011

37

<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>





</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>73

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 0 Specifies the name of the element displaying the

captioning.

obj.Controls.currentMarker 0 Specifies the current marker number.

obj.Controls.currentPosition 0 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 true 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 false Specifies whether video content is played back in

full-screen mode. 74

9/21/2011

38


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 false 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.75


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 False 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>PlayingAudio 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> 76

9/21/2011

39

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>

77

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>

78

9/21/2011

40

Playing Audio and Video File using Real Audio and Video Player

<html>

<head>

<title>Audio and Vedio using Real Audio</title>


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> 79

<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>


function changeProperties()

{

var loop = parseInt( audioForm.loopit.value );

if ( ( loop >= -1 ) )

{

audio.loop = ( isNaN( loop ) ? 1 : loop );

}80

9/21/2011

41

else

{

alert( "Please enter a integer\n" + "greater than or

equal to -1." );

}

var vol = parseInt( audioForm.vol.value );

if ( ( vol >= -10000 ) && ( vol <= 0 ) )

{

audio.volume = ( isNaN( vol ) ? 0 : vol );

}

else

{

alert( "Please enter an integer\n" + "between -10000

and 0." );

}

}

function stopSound()

{

if ( audioForm.stopButton.value == "Stop Sound" )

{

audio.src = "";

audioForm.stopButton.value = "Start Sound";

}81

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 [-10000

(low) to 0 (high)]

82

9/21/2011

42

<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>

83

Data binding with

Tabular Data Control

84

9/21/2011

43

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 85

Create HTMLStandardColors.txt – Text File

86

9/21/2011

44

<html>

<head>

<title>Introduction to Data Binding</title>

<object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-BC04-

0080C7055A83">

<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 = " ";

} 87

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>88

9/21/2011

45

<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>

89

Moving within a Recordset

<html>

<head>

<title>Moving Within a Record Set</title>


0080C7055A83">

<param name = "DataURL" value = "HTMLStandardColors.txt">




</object>


var recordSet = Colors.recordset;

function move(whereTo)

{

switch(whereTo)

{

case "first":


break; 90

9/21/2011

46

case "previous":

recordSet.MovePrevious();

if (recordSet.BOF)

recordSet.MoveLast();

break;

case "next":

recordSet.MoveNext();

if(recordSet.EOF)


break;

case "last":

recordSet.MoveLast();

break;

}

}

</script>

<style type = "text/css">

input {background-color:khaki;color:green;font-weight:bold}

</style>

</head>91

<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>

92

9/21/2011

47

First Record Next Record

Last Record Previous Record

93

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-

11D0-BC04-0080C7055A83"><param name = "DataURL" value = "Images.txt"><param name = "UseHeader" value = "TRUE">

</object>


var recordSet = Images.recordset;94

9/21/2011

48

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();break;

case "last":recordSet.MoveLast();break;

}}

</script></head> 95

<body><img datasrc = "#Images" datafld = "image" alt = "Image" style =

"position:absolute;left:150px">

<div style = "position:absolute;left:110;top:170">

<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');">

</div>

</body>

</html> 96

9/21/2011

49

First Record

Last Record

Next Record

Previous Record

97

Binding to a table

<html>

<head>

<title>Data Binding and Tables</title>

<object id = "Colors" classid = "CLSID:333C7BC4-460F-11D0-

BC04-0080C7055A83">

<param name = "DataURL" value = "HTMLStandardColors.txt">




</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>98

9/21/2011

50

<tbody>

<tr style = "background-color:lightsteelblue">

<td><span datafld =

"ColorName"></span></td>

<td><span datafld = "ColorHexRGBValue"

style = "font-family:monospace"></span></td>

</tr>

<tbody>

</body>

</html>

99

Sorting table Data

<html>

<head>

<title>Sorting the Data in Tables</title>


0080C7055A83">

<param name = "DataURL" value =

"HTMLStandardColors.txt">




</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">

100

9/21/2011

51

<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>

101

<tbody>

<tr style = "background-color:lightsteelblue">

<td><span datafld =

"ColorName"></span></td>

<td><span datafld = "ColorHexRGBValue"

style = "font-

family:monospace"></span></td>

</tr>

<tbody>

</table>

</body></html>

102

9/21/2011

52

103

ActiveX –

Structured

Graphics Control

104

9/21/2011

53

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> 105

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.

106

9/21/2011

54

Example:

<OBJECT ID = "lines“ STYLE = "border-style: groove; width: 300; height: 200“ CLASSID =

"CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">



<PARAM NAME = "Line0003“ VALUE = "PolyLine( 2, -140, 0, -10, 0 )">

<PARAM NAME = "Line0004“ VALUE = "PolyLine( 2, 0, 0, 0, 90 )">


<PARAM NAME = "Line0006“ VALUE = "PolyLine( 5, 75, 0, 50, 25,

75, 75, 125, 25, 85, 10 )">


<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

107

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

0 None

1 Solid Fill

2 None

3 Horizontal lines

4 Vertical lines

5 Diagonal lines

6 Diagonal lines

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

108

9/21/2011

55

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. 109

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 (100-700), 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">110

9/21/2011

56



<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 = "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, 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>111

Output

112

9/21/2011

57

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.

113

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>114

9/21/2011

58

<BODY ONCLICK = "change()">

<OBJECT ID = "left“ STYLE = "position: absolute; width: 500; height: 200“ CLASSID =

"CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">





<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= "Line0005“ VALUE = "Rect( -35, -40, 70, 80, 0 )">

</OBJECT>

<OBJECT ID = "right“ STYLE = "position: absolute; width: 500; height: 200“ CLASSID =

"CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">



<PARAM NAME = "Line0003“ VALUE = "SetFillColor( 200, 200, 200 )"> 115


<PARAM NAME= "Line0005“ VALUE = "Rect( 80, -80, 70, 80, 0 )">

</OBJECT>

</BODY>

</HTML>

116

9/21/2011

59

117

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. 118

9/21/2011

60

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:

SetLineColor( 0, 0, 0 )

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 ) 119

<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:

200“ CLASSID = "CLSID:369303C2-D7AC-11d0-89D5-00A0C90833E6">



<PARAM NAME = "Line0003“ VALUE = "PolyLine( 2, -140, 0, -10, 0 )">

<PARAM NAME = "Line0004“ VALUE = "PolyLine( 2, 0, 0, 0, 90 )">

</OBJECT> </BODY>

</HTML>120

9/21/2011

61

121

122

9/21/2011

62

Mouse EventsThe 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.123

<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 );

</SCRIPT>

</HEAD>

<BODY>

<OBJECT ID = "ball“ STYLE = "width: 140; height: 140; border-style: groove;

position: absolute; top: 10; left: 10;“ CLASSID = "clsid:369303C2-D7AC

11d0-89D5-00A0C90833E6">


<PARAM NAME = "Line0002“ VALUE = "SetLineStyle(0)">


<PARAM NAME = "Line0004“ VALUE = "SetFillStyle( 1 )">

<PARAM NAME = "Line0005“ VALUE = "Oval( -50, -50, 100, 100 )">

<PARAM NAME = "MouseEventsEnabled“ VALUE = "1">

</OBJECT>

</BODY></HTML> 124

9/21/2011

63

The following is the rendering initially and after the mouse cursor has been moved over and out

of the circle any number of times.

125

dhtml - chettinadtech.ac.inchettinadtech.ac.in/storage/11-10-01/11-10-01-07-07-48-1037... · dhtml...

Documents