Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment...
-
Upload
ronald-curtis -
Category
Documents
-
view
249 -
download
1
Transcript of Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment...
![Page 1: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/1.jpg)
Introduction to DHTML
![Page 2: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/2.jpg)
What is DHTML?
Dynamic HTML Just as Access is Dynamic Database
environment Can have controls that respond to events Can have centralized code modules Can be written in VB(script)
![Page 3: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/3.jpg)
What is DHTML?
Dynamic Hypertext Markup Language is comprised of:– CSS (cascading style sheets)– DOM (document object module)– Scripting (Javascript and VBscript)
Allows for more interactivity and special effects on web pages.
![Page 4: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/4.jpg)
Document Object Model (DOM)
![Page 5: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/5.jpg)
Document Object Model (DOM)
DOM is an interface that permits scripts to access and update the content, structure and style of the document.
Every element of the web page can be dynamically updated in response to input from the user or other programs
HTML elements are treated as objects, their attributes are treated as properties of the objects
The DOM has a hierarchy of elements with the window as the top level object
![Page 6: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/6.jpg)
Dynamic HTML:Object Model and Collections
The object model allows Web authors to control
the presentation of their pages and gives them
access to all the elements on their Web pages
![Page 7: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/7.jpg)
Object Referencing
Simplest way to reference an element is by using element’s id attributes
Example:
function start()
{
alert(pText.innerText);
pText.innerText=“Thanks for coming”;
}
<body onload=“start()”>
<p id=“pText”>Welcome to our Web page!</p>
</body>
![Page 8: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/8.jpg)
Collections all and children
Collections are arrays of related objects on a page. The all collection is collection (or array) of all the XHTML elements
in a document, in the order in which they appear.
function start()
{
for ( var loop = 0; loop < document.all.length; ++loop )
elements += "<br />" + document.all[ loop ].tagName;
pText.innerHTML += elements;
alert( elements );
}
<body onload = "start()">
<p id = "pText">Elements on this Web page:</p> </body>
![Page 9: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/9.jpg)
Collections all and childrenvar elements = "<ul>";
function child( object ) { var loop = 0; elements += "<li>" + object.tagName + "<ul>"; for ( loop = 0; loop < object.children.length; loop++ ) { if ( object.children[ loo<p ].children.length ) child( object.children[ loop ] ); else elements += "<li>" + object.children[ loop ].tagName + "</li>"; } elements += "</ul>" + "</li>"; }
<body onload = "child( document.all[ 4 ] ); myDisplay.outerHTML += elements; myDisplay.outerHTML += '</ul>';">
<p>Welcome to our <strong>Web</strong> page!</p>
<p id = "myDisplay"> Elements on this Web page: </p>
</body>
![Page 10: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/10.jpg)
Dynamic Styles
An element’s style can be changed dynamically. Often such a change is made in response to user events.
function start()
{
var inputColor = prompt("Enter a color name for the " +
"background of this page", "" );
document.body.style.backgroundColor = inputColor;
}
<body onload = "start()">
<p>Welcome to our Web site!</p>
</body>
![Page 11: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/11.jpg)
Dynamic Styles
function start()
{
var inputClass = prompt(
"Enter a className for the text “ + , "" );
pText.className = inputClass;
}
<body onload = "start()">
<p id = "pText">Welcome to our Web site!</p>
</body>
![Page 12: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/12.jpg)
Dynamic Positioning
Dynamic Positioning enables XHTML elements to be positioned with scripting.
This is done by declaring an element’s CSS position property to be either absolute or relative.
Moving the element by manipulating any of the top, left, right or bottom CSS properties.
We use scripting to vary the color, fontFamily or fontSize attributes.
![Page 13: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/13.jpg)
Dynamic Positioning:Example
function start()
{
window.setInterval( "run()", 100 );
}
<body onload = "start()">
<p id = "pText" style = "position: absolute; left: 0;
font-family: serif; color: blue">
Welcome!</p>
</body>
A similar function to setInterval is setTimeout, which takes same
parameters but instead waits the specified amount of time before
calling the named function only once
![Page 14: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/14.jpg)
Dynamic Positioning:Example
The clearTimeout and clearInterval functions are used to stop setTimeout and setInterval respectively
For example, if you started a setTimeout timer with
timer1=window.setInterval(‘run()”,200);
you could then stop the timer by calling
window.clearTimeout(timer1);
Which would stop the timer before it fired
![Page 15: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/15.jpg)
frames collection
frames collection is useful to access those elements and objects are in different frames
<frameset rows = "100, *">
<frame src = "top.html" name = "upper" />
<frame src = "" name = "lower" />
</frameset>
function start()
{
var text = prompt( "What is your name?", "" );
parent.frames( "lower" ).document.write(
"<h1>Hello, " + text + "</h1>" );
}
![Page 16: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/16.jpg)
navigator Object
navigator object contains information about the Web browser that is viewing the page
This is useful to redirecting from one browser to another browser
function start()
{ if ( navigator.appName == "Microsoft Internet Explorer" )
{ if ( navigator.appVersion.substring( 0, 1 ) >= "4" )
document.location = "newIEversion.html";
else
document.location = "oldIEversion.html";
}
else
document.location = "NSversion.html“; }
![Page 17: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/17.jpg)
Dynamic HTML: Event model
Clicking a button, moving the mouse pointer over part of the Web page, selecting some text on the page—these actions all fire events, and a DHTML author can write code to run in response to the event.
![Page 18: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/18.jpg)
Event onclick and onload
Event onclick
<body>
<!-- The id attribute gives a unique identifier -->
<p id = "para">Click on this text!</p>
<!-- You can specify event handlers inline -->
<input type = "button" value = "Click Me!"
onclick = "alert( 'Hi again' )" />
</body>
![Page 19: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/19.jpg)
Event onclick and onload
Event onload
function start ()
{
alert(“Welcome to Nirma University”);
}
<body onload = "start()">
</body>
![Page 20: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/20.jpg)
Error Handling with onerror
onerror event is used to execute specialized error-handling code
window.onerror = handleError;
function doThis() {
alrrt( "hi" ); // alert misspelled, creates an error
}
function handleError( errType, errURL, errLineNum )
{
window.status = "Error: " + errType + " on line " + errLineNum;
return true;
}
<body> <input id = "mybutton" type = "button" value = "Click Me!"
onclick = "doThis()" /></body>
This program works correctly only if “Script debugging” is disabled in IE.
Tools menu->Internet Option dialog->Advanced tab->Disabled script debugging
![Page 21: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/21.jpg)
Tracking the Mouse with Event onmousemove
Event onmousemove fires repeatedly whenever the user moves the mouse over the web page.
The following program uses this event to updates a coordinate display that gives the position of the mouse in the coordinate system of the object containing the mouse cursor
![Page 22: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/22.jpg)
Tracking the Mouse with Event onmousemove
function updateMouseCoordinates()
{
coordinates.innerText = event.srcElement.tagName +
" (" + event.clientX + ", " + event.clientY + ")";
}
<body style = "background-color: wheat" onmousemove = "updateMouseCoordinates()">
<span id = "coordinates">(0, 0)</span><br />
<img src = "deitel.gif" style = "position: absolute;
top: 100; left: 100" alt = "Deitel" />
</body>
![Page 23: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/23.jpg)
Rollovers with onmouseover and onmouseout
When the mouse cursor move over an element, an onmouseover event occurs for that element
When the mouse cursor leaves the element, an onmouseout event occurs for that element
<html>
<body>
<a href="http://www.cit.cornell.edu"
onmouseover="document.logo.src='malaram.jpg' "
onmouseout ="document.logo.src='harry.gif ' " >
<img name="logo" src="harry.gif " border=0></a>
</body>
</html>
![Page 24: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/24.jpg)
Form Processing with onfocus and onblur
The onfocus event fires when an element gains focus. The onblur event fires when an element loses focus.
var helpArray = [ "Enter your name in this input box.“, "Enter your email address in this input
box, “];
function helpText( messageNum )
{
myForm.helpBox.value = helpArray[ messageNum ];
}
<form id = "myForm" action = "">
Name: <input type = "text" name = "name"
onfocus = "helpText(0)" onblur = "helpText(6)" /><br />
Email: <input type = "text" name = "email"
onfocus = "helpText(1)" onblur = "helpText(6)" />
</form
<textarea name = "helpBox">
</textarea>
![Page 25: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/25.jpg)
More Form Processing with onsubmit and onreset
These two events fire when a form is submitted or reset, respectively.
function formSubmit() {
window.event.returnValue = false;
if ( confirm ( "Are you sure you want to submit?" ) )
window.event.returnValue = true;
}
function formReset() {
window.event.returnValue = false;
if ( confirm( "Are you sure you want to reset?" ) )
window.event.returnValue = true;
}
<form id = "myForm" onsubmit = "formSubmit()"
onreset = "formReset()" action = "">
</form>
![Page 26: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/26.jpg)
Event Bubbling
Event bubbling is the process whereby events fired in child elements “bubble” up to their parent element.
function documentClick() {
alert( "You clicked in the document" );
}
function paragraphClick( value ) {
alert( "You clicked the text" );
if ( value )
event.cancelBubble = true;
}
document.onclick = documentClick;
<body>
<p onclick = "paragraphClick( false )">Click here!</p>
<p onclick = "paragraphClick( true )">Click here, too!</p>
</body>
![Page 27: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/27.jpg)
Dynamic HTML: Filters and Transitions
Filters and transitions are specified with the CSS filter property. Applying filters to text and images causes changes that are
persistent. Transitions are temporary; applying a transition allow to transfer
from one page to another with pleasant visual effect, such as a random dissolve.
Filters and transitions do not add content to your pages-rather, they present existing content in an engaging manner to capture the user’s attention.
Filters and transitions are Microsoft technologies available only in Windows-based versions of IE6. Do not use these capabilities if you are writing other browsers
![Page 28: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/28.jpg)
Flip Filters: flipv and fliph
The flipv and fliph filters mirror text or images vertically and horizontally.
<body>
<table>
<tr>
<td style = "filter: fliph">Text</td>
<td>Text</td></tr>
<tr>
<td style = "filter: flipv fliph">Text</td>
<td style = "filter: flipv">Text</td></tr>
</table>
</body>
![Page 29: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/29.jpg)
Flip Filters: flipv and fliph
![Page 30: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/30.jpg)
Transparency with the chroma filter
The chroma filter applies transparency effects dynamically, without using a graphics editor to hard-code transparency into the image.
function changecolor( theColor )
{
if ( theColor ) {
chromaImg.filters( "chroma" ).color = theColor;
chromaImg.filters( "chroma" ).enabled = true;
}
else
chromaImg.filters( "chroma" ).enabled = false;
}
<img id = "chromaImg" src = "trans.gif" style ="position: absolute; filter: chroma" alt =
"Transparent Image" />
![Page 31: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/31.jpg)
Transparency with the chroma filter
<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>
![Page 32: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/32.jpg)
Transparency with the chroma filter
![Page 33: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/33.jpg)
Creating Image masks
Applying the mask filter to an image allows you to create an effect in which an element’s background is a solid color and its foreground is transparent, so the image or color behind it show through.
<body>
<h1>Mask Filter</h1>
<div style = "position: absolute; top: 125; left: 20; filter: mask( color =#CCFFFF)">
<h1 style = "font-family: Courier, monospace">
AaBbCcDdEeFfGgHhIiJj<br />
KkLlMmNnOoPpQqRrSsTt
</h1></div>
<img src = "gradient.gif" width = "400" height = "200"
alt = "Image with Gradient Effect" />
</body>
![Page 34: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/34.jpg)
Creating Image masks
![Page 35: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/35.jpg)
Image Filters: invert, gray and xray
<tr>
<td><img src = "hc.jpg" alt = "normal scenic view" /></td>
<td><img src = "hc.jpg" style = "filter: gray“ alt = "gray scenic view"/>
</td>
</tr>
<tr>
<td><img src = "hc.jpg" style = "filter: xray“ alt = "xray scenic view"/>
</td>
<td><img src = "hc.jpg" style = "filter: invert“ alt = "inverted scenic view"/>
</td>
</tr>
![Page 36: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/36.jpg)
Image Filters: invert, gray and xray
![Page 37: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/37.jpg)
Adding shadows to Text
A simple filter that adds depth to your text is the shadow filter. This filter creates a shadowing effect that gives your text a three-
dimensional appearance.var shadowDirection = 0;
function start()
{
window.setInterval( "runDemo()", 500 );
}
function runDemo()
{
shadowText.innerText = "Shadow Direction: " + shadowDirection % 360;
shadowText.filters( "shadow" ).direction = ( shadowDirection % 360 );
shadowDirection += 45; }
![Page 38: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/38.jpg)
Adding shadows to Text
<body onload = "start()">
<h1 id = "shadowText" style = "position: absolute; top: 25;
left: 25; padding: 10; filter: shadow( direction = 0,
color = red )">Shadow Direction: 0</h1>
</body>
![Page 39: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/39.jpg)
Creating Gradient with alpha
This filter is used to achieve gradient effectfunction run()
{
pic.filters( "alpha" ).opacity = opacityButton.value;
pic.filters( "alpha" ).finishopacity =
opacityButton2.value;
pic.filters( "alpha" ).style = styleSelect.value;
}
<div id = "pic“ style = "position: absolute; left:0; top: 0;filter: alpha( style = 2, opacity = 100,
finishopacity = 0 )">
<img src = "flag.gif" alt = "Flag" />
</div>
Opacity: Color saturation of an image.
![Page 40: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/40.jpg)
Creating Gradient with alpha
![Page 41: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/41.jpg)
Making Text glow
This filter is used to make text glow.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 );
}
<span id = "glowSpan" style = "position: absolute;left: 200;top: 100; padding: 5; filter: glow(
color = red, strength = 5 ); font-size: 2em“>Glowing Text
</span>
![Page 42: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/42.jpg)
Making Text glow
![Page 43: Introduction to DHTML. What is DHTML? Dynamic HTML Just as Access is Dynamic Database environment Can have controls that respond to events Can have centralized.](https://reader035.fdocuments.net/reader035/viewer/2022081421/5697bfa61a28abf838c980b1/html5/thumbnails/43.jpg)
Creating Motion with blur
The blur filter creates an illusion of motion by blurring text or image in a certain direction.