Working with DOM (III)

computers

ALTE DOCUMENTE

VeriLab - An introductory lab for using Verilog in digital design

WINDOWS 95 OSR2 (OR LATER) Promise ATA100 Driver Quick Installation

Configure the Registry

Microsoft Operations Manager 2005 Deployment Guide

Modeling

CPU

A7N8X-VM/400 - ASUS

8051 CROSS ASSEMBLER

Internet Download Manager description

A wide-area network (WAN)

Working with DOM (III)

Contents

Visual Filter Scenarios

Creating Static Visual Effects

No-script example

Timer script example

Creating Dynamic Visual Effects

Event script example

Timer script example

Creating a Disabled UI Element Effect

No script example

Event script example

Creating Complex Visual Effects

Simple script example

Event script example

Programming example

Transition Scenarios

Creating Non-Event Transitions

Simple script example

Creating Event-Driven Transitions

Event script example

Creating Complex Transitions

Event Script Example

Timer script example

Visual Filter Scenarios

There are unlimited uses for filters in both static and dynamic Web pages. The following scenarios explore some of the more common or interesting applications of filter styles and combinations of script and filters.

Creating Static Visual Effects

Static visual effects are the most common use of style filters. These include simply applying a filter to a DIV or object to create a nonchanging effect, such as a text drop shadow. Static effects are an easy way to enhance a Web page's design with minimum effort and bandwidth, and often without scripting.

No-script example

The following example shows how television-style effects can be created using dynamic HTML positioning and the alpha visual filter.

<HTML>

<HEAD><TITLE>Static Alpha Filter Demo</TITLE>

</HEAD>

<BODY>

<DIV style=" top:20; left:15; width:50%; height:35;

background-color: black; filter: alpha(opacity=50)">

</DIV>

<DIV style="color:red; top:20; width:50%; height:100;

margin-top:5; margin-left:5;">

HERE IS CAPTION TEXT

</P>

</DIV>

</BODY>

</HTML>

Example # 1 -

Timer script example

Visual effects can be "animated" using a timer script. The following sample shows two filters, alpha and glow, and two different timer methods.

<HTML>

<HEAD><TITLE>Timer Demos</TITLE>

function init()

var delta = 5

function foo(obj)

function makeFlash(obj)

function stopFlash(obj)

</SCRIPT>

</HEAD>

<DIV id=bob style="width:50%; filter:glow(Color=#FAF900,Strength=2,enabled=0);

"onclick="stopFlash(this)">

</DIV>

</DIV>

</DIV>

</BODY>

</HTML>

Example # 2 -

Creating Dynamic Visual Effects

Dynamic visual effects bring a basic level of interactivity to Web documents. Dynamic effects require an event to prompt a change in the document-this can be a mouse rollover or click event, a timer interval, or a sequence of script functions calling the new content states.

Event script example

Here an interactive step has been added to the previous "television caption" sample that displays the caption only when the mouse is over the inline image.

<HTML>

<HEAD><TITLE>Dynamic Alpha Filter Demo</TITLE>

function caption()

else

}

</SCRIPT>

</HEAD>

<BODY>

<DIV id="bob" style="visibility:hidden; top:20; left:15; width:50%;

height:35; background-color: black; filter: alpha(opacity=50)">

</DIV>

<DIV id="fred" style="visibility:hidden; color:red; top:20;

width:50%; height:100; margin-top:5; margin-left:5;">

HERE IS CAPTION TEXT

</P>

</DIV>

</BODY>

</HTML>

Example # 3 -

Timer script example

Timers create cyclical effects, as in the following interactive demonstration.

<HTML><HEAD><TITLE>Timer Demonstration</TITLE>

function init()

function start(i)

else

obj.filters.item(0).Play()

}

function done(i)

function updateTime()

</SCRIPT>

</HEAD>

<BODY TOPMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"

LINK="#000000" VLINK="#808080" ALINK="#000000" onload="init()">

<SPAN style=" top:140; left:20; width:400; text-align:center;

font-size:14pt">

Enter a new value for the timer interval<BR>

</SPAN>

<DIV id=div1 style="position: top:20; left:20; width:100; height:100;

font-size:100; text-align:center; background-color:blue;

filter: revealTrans(Transition=1, Duration=1.5)" onfilterchange=done(1)>

</DIV>

<DIV id=div2 style=" top:20; left:140; width:100; height:100;

font-size:100; text-align:center; background-color:blue;

filter: revealTrans(Transition=2, Duration=1.5)" onfilterchange=done(2)>

</DIV>

<DIV id=div3 style=" top:20; left:260; width:100; height:100;

font-size:100; text-align:center; background-color:blue;

filter: revealTrans(Transition=3, Duration=1.5)" onfilterchange=done(3)>

</DIV>

<DIV id=div4 style=" top:20; left:380; width:100; height:100;

font-size:100; text-align:center; background-color:blue;

filter: revealTrans(Transition=4, Duration=1.5)" onfilterchange=done(4)>

</DIV>

</BODY>

</HTML>

Example # 4 -

Creating a Disabled UI Element Effect

Web authors often resort to the trick of using multiple graphics to indicate a user state for a single graphic, such as a navigation bar button. With visual filters, these are no longer required-any graphic can be displayed in such a manner as to indicate whether it is available for user interaction or not. Best of all, it's all done in code, and doesn't require an additional download from a server.

No script example

This page shows how both the gray and alpha filters can visually represent unavailable link states.

<HTML><HEAD><TITLE>Disabled Interface Effects</TITLE>

</HEAD>

<BODY TOPMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"

LINK="#000000" VLINK="#808080" ALINK="#000000"

style="font-family:Arial">

<h1>Disabled Interface Effects with Filters<HR SIZE=1></H1>

<P style="font-size:12pt;">These images are normal, indicating they are available for the user to click on them:</P>

</SPAN>

<P style="font-size:12pt;">These images are grayed out with the <B>Grayscale</B> filter, indicating they are unavailable:</P>

</SPAN>

<P style="font-size:12pt;">These images are grayed out with the <B>Alpha</B> filter, indicating they are unavailable:</P>

</SPAN>

</DIV>

</BODY>

</HTML>

Example # 5 -

Event script example

As interactive objects, links can change state in response to mouse events, as this page demonstrates.

<HTML><HEAD><TITLE>Disabled Interface Effects</TITLE>

function click1()

function click2()

function click3()

function click4()

function click5()

</SCRIPT>

</HEAD>

<BODY TOPMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"

LINK="#000000" VLINK="#808080" ALINK="#000000"

style="font-family:Arial">

<h1>UI In Action<HR SIZE=1></H1>

Click these buttons to display their associated content.

</DIV>

<img id=button1 src="button1.gif" onclick="click1()"

height="39" width="108" border="0" alt="*"><BR>

<img id=button2 src="button2.gif" onclick="click2()"

height="39" width="108" border="0" alt="*"><BR>

<img id=button3 src="button3.gif" onclick="click3()"

height="39" width="108" border="0" alt="*"><BR>

<img id=button4 src="button4.gif" onclick="click4()"

height="39" width="108" border="0" alt="*"><BR>

<img id=button5 src="button5.gif" onclick="click5()"

height="39" width="108" border="0" alt="*">

</SPAN>

<DIV id=box1 style=" top:120; left:190; width:200;

height:39 background:gray; font-size:12pt; font-weight:bold; visibility:hidden">

This is the contents linked to Button 1

</DIV>

<DIV id=box2 style=" top:159; left:190; width:200; height:39;

background:red; font-size:12pt; font-weight:bold; visibility:hidden">

This is the contents linked to Button 2

</DIV>

<DIV id=box3 style=" top:198; left:190; width:200; height:39;

background:green; font-size:12pt; font-weight:bold; visibility:hidden">

This is the contents linked to Button 3

</DIV>

<DIV id=box4 style=" top:237; left:190; width:200; height:39;

background:yellow; font-size:12pt; font-weight:bold; visibility:hidden">

This is the contents linked to Button 4

</DIV>

<DIV id=box5 style=" top:276; left:190; width:200; height:39;

background:orange; font-size:12pt; font-weight:bold; visibility:hidden">

This is the contents linked to Button 5

</DIV>

</BODY>

</HTML>

Example # 6 -

Creating Complex Visual Effects

Combining visual filters, transitions, and sophisticated programming allows Web authors to create complex and compelling visual designs and interactivity. The following examples provide just a glimpse into the versatility of visual effects that are available in authoring for Internet Explorer 4.0.

Simple script example

The following Web page shows how the mask filter can be combined with a series of style changes to create an interesting effect.

<HTML><HEAD><TITLE>Mask Filter in Action</TITLE>

var colors=new Array("red", "#2994fd", "#11fff2", "#c0b189", "#f2fd89",

"magenta", "white");

function rainbow()

</SCRIPT>

</HEAD>

<BODY TOPMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"

LINK="#000000" VLINK="#808080" ALINK="#000000" onload="rainbow()">

</DIV>

<DIV style=" top:200; left:190; width:200; height:100;

text-align:center; z-index:2">

<IMG id=logo src="race.gif" style="filter:mask(color=red);" height="100"

width="200" border="0" alt="*">

</DIV>

<DIV style="position: color: white; top: 200; left:190;

width:200; height:100; z-index:1">

<SPAN id=racerX style="font-size:8pt; line-height:8px; font-family=Arial;

font-weight:bold; z-index:1">

<PRE>racerXracerXracerXracerXracer

racerXracerXracerXracerXracer

</PRE>

</SPAN>

</DIV>

</BODY>

</HTML>

Example # 7 -

Event script example

The light filter is the most unique and complex visual filter. The following sample shows how the filter can be combined with mouse events to create a unique DHTML experience.

<html><head><title>Dynamic Lighting Effects</title>

</head>

<tr>

<h1 style="color=yellow">DHTML Dynamic Lighting Effects<hr SIZE="1"></h1>

</td>

</tr>

<tr>

<img style="width:200;height:200" src="beach.jpg" border="0" alt="*"

WIDTH="256" HEIGHT="165">

</td>

Move the cursor over the image and see the light track its movement. Click on the

image to add additional lights and watch them all track the mouseover

movement.

</span>

</td>

</tr>

</table>

var g_numlights = 0;

var blurbs = new Array("DHTML implements many cool interactive features.

Scripters are now able to better track, and respond to, user

actions.", "Here we are using a lighting filter to respond to the

user. Clicking on the image will add additional cone lights.",

"The movelight method is being used dynamically, it is bound to

the images mousemove event to track the users cursor

movements", "And this text is being set from the onclick

event - all with very little code! The scripting horizons have

been expanded with Internet Explorer 4.0");

window.onload = setlights;

document.onclick=keyhandler;

flttgt.onmousemove=mousehandler;

//---create the light collection on the fly based on current number of lights desired

function setlights()

}

//-------------cycle from 0 to 3 for number of lights

function keyhandler()

//-----------move the impact points of all current cones to the mouse x,y

function mousehandler()

}

</script>

</body>

</html>

Example # 8 -

Programming example

The same light filter can be controlled by sophisticated programming, as the following sample shows.

<html><head><title>Radar Filter sample</title>

var Light_X = 20

var Light_Y = 20

var Light_Z = 40

var xInc = 10;

var yInc = 10;

var r = 100;

var deg = 0;

var deg1;

var rad;

var PointAngle;

var PlaneLight_X = 20

var PlaneLight_Y = 120

var PlaneLight_Z = 3

var conversion = (2 * 3.1415917)/360

function movefilt()

function movePlanes()

function go()

</script>

</head>

<body TOPMARGIN="10" LINK="#000000" VLINK="#808080" ALINK="#000000"

onload="go()">

<img src="radar.jpg" id="Body1" style="height:200;width:200;filter:light()"

border="0" alt="*" WIDTH="151" HEIGHT="149">

</body>

</html>

Example # 9 -

Transition Scenarios

There are unlimited uses for transitions in both static and dynamic Web pages. The following scenarios explore some of the more common or interesting applications of filter styles combined with transitions and, as in the more complex demonstrations, script functions.

Creating Non-Event Transitions

Non-event transitions are analogous to static visual filters-they are used frequently to enhance the visual appearance of a page without changing the level of interactivity of the document.

Simple script example

The following demonstration uses transitions to display information in an interesting manner as the page loads.

<html><head><title>Basic Transitions Demo</title>

function LogoTrans()

function Buttons()

function transText()

</script>

</head>

<body onload="LogoTrans()" background="clouds.jpg" height="256" width="256"

border="0">

<div id="master" style=" left:0; top:20; width:100%;

text-align=center">

<img id="logo" src="logo.gif" style="visibility:hidden; border="0"

WIDTH="256" HEIGHT="56"filter:revealTrans(Duration=2,Transition=4)" >

</div>

<div id="button1" style=" width:108; height:39; top:100; left:100;

filter:revealTrans(transition=12,duration=1)">

</div>

<div id="button2" style=" width:108; height:39; top:150; left:100;

filter:revealTrans(transition=12,duration=1)">

</div>

<div id="button3" style=" width:108; height:39; top:200; left:100;

filter:revealTrans(transition=12,duration=1)">

</div>

<div id="button4" style=" width:108; height:39; top:250; left:100;

filter:revealTrans(transition=12,duration=1)">

</div>

<div id="button5" style=" width:108; height:39; top:300; left:100;

filter:revealTrans(transition=12,duration=1)">

</div>

<div id="text" style=" font-size:16pt; font-family:Arial; width:250;

height:150; top:100; left:300; visibility:hidden;

filter:revealTrans(transition=5,duration=5)">

This is a whole bunch of sample text. This is a whole bunch of sample text. This is a whole bunch of sample text. This is a whole bunch of sample text. This is a whole bunch of sample text. This is a whole bunch of sample text. This is a whole bunch of sample text. This is a whole bunch of sample text. This is a whole bunch of sample text. This is a whole bunch of sample text. This is a whole bunch of sample text.

</div>

</body>

</html>

Example # 10 -

Creating Event-Driven Transitions

Event script example

This demonstration shows how a mouse event can trigger a sequence of transitions.

<HTML><HEAD><TITLE>Filter sample</TITLE>

function InitializePage()

</script>

</HEAD>

<BODY onload="InitializePage()" TOPMARGIN=0 BGPROPERTIES="FIXED"

BGCOLOR="#FFFFFF" LINK="#000000" VLINK="#808080" ALINK="#000000">

<DIV id=div1 style="position: top:20; left:20; width:100; height:100;

font-size:100; text-align:center; background-color:red;

filter: revealTrans(Transition=1, Duration=.01)" onclick=Count()

onfilterchange=Repeat()>

</DIV>

<br>Click the square to see something cool!

</div>

<br>

var iMaxTransition = 23; // maximum number of transitions supported

var iTransNumber = iMaxTransition; // current transition

var speed = 2.5; // initial speed of transition

var fRunning = 0;

var speedDirection = 0;

var g_aColors = new Array(24); // array of colorpair objects

// constructor for a color pair object. holds a foreground and a background color.

function ColorPair(sColor, sBGColor)

// build a global table of foreground/background color pairs.

// Initially these were calculated

// If a new transition is added the table must be expanded

function BuildColorTable()

function Repeat()

function Count()

div1.filters[0].play(speed);

if (iTransNumber == 0)

iTransNumber--;

if ( speed > .1)

}

</script>

</BODY>

</HTML>

Example # 11 -

Creating Complex Transitions

Combining visual filters and transitions allows Web authors to create complex and compelling visual designs and interactivity. The following example provides just a glimpse into the versatility of visual effects that are available in authoring for Internet Explorer 4.0.

Event Script Example

Intermediate Web pages (sometimes called "logo pages") provide an opportunity to be creative with transitions.

<HTML><HEAD><TITLE>combined visual effect and transition</TITLE>

// if we come in here again, turn the glow off to reapply it with the transition

function Zap()

// make sure the transition isn't already running

if ( myimg.filters.blendTrans.status == 0 )

}

</script>

</HEAD>

<div id=myimg onclick="Zap()" style="font-size:80; height:200;

filter:glow(color=#00fff0, strength=6, enabled=0) blendTrans(duration=2)">

Click on me to watch me Glow !!

</div>

</BODY>

</HTML>

Example # 12 -

Timer script example

Computer-based training applications can use timed transitions to demonstrate their subject matter, as the following example shows.

<HTML><HEAD><TITLE>Filter sample</TITLE>

function HelpArray(len)

HelpText = new HelpArray(5)

HelpText[0] = "It is quite easy to add visual flair to a page by using transitions"

HelpText[1] = "First, set the revealTrans filter on the stylesheet for one object "

HelpText[2] = "Next, use the apply() method to stop changes from being drawn"

HelpText[3] = "Now, change whatever things you want to change"

HelpText[4] = "Finally, use the play() method to transition to those changes"

ScriptText = new HelpArray(5)

var i = -1

function playHelp()

else

div1.filters[0].apply()

div1.innerText = HelpText[i]

div1.filters[0].play()

mytimeout = setTimeout("playHelp()",7000)

}

</script>

</HEAD>

<BODY TOPMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"

LINK="#000000" VLINK="#808080" ALINK="#000000" onload="playHelp()">

<DIV id=div1 style="position: top:20; left:20; width:300; height:300;

font-size:40; text-align:center; filter: revealTrans(Transition=12, Duration=2)"

onload=playHelp()>

</DIV>

</BODY>

</HTML>

Example # 13 -

Document Info

Accesari: 886
Apreciat:

Comenteaza documentul:

Nu esti inregistrat
Trebuie sa fii utilizator inregistrat pentru a putea comenta

Creaza cont nou

A fost util?

Daca documentul a fost util si crezi ca merita
sa adaugi un link catre el la tine in site

Copiaza codul:
in pagina web a site-ului tau.

eCoduri.com - coduri postale, contabile, CAEN sau bancare

Politica de confidentialitate | Termenii si conditii de utilizare