XP Tutorial 12 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Working with Special Effects Creating Rollovers, Menus, Filters, and Transitions

Tutorial 12 New Perspectives on HTML, XHTML, and DHTML, Comprehensive

1

XP

Tutorial 12

Working with Special Effects

Creating Rollovers, Menus, Filters, and Transitions

Tutorial 12 New Perspectives on HTML,XHTML, and DHTML, Comprehensive

2

XPObjectives

• Understand how to work with the JavaScript document.images collection

• Create image objects and image object arrays

• Set the properties of image objects• Create image rollovers with image objects

and the document.images collection


3

XPObjectives

• Understand how to create text rollovers• Understand how to work with pop-up and pull-

down menus• Hide and unhide objects in a Web page


4

XPObjectives

• Understand and implement Internet Explorer’s filter styles

• Understand and apply Internet Explorer’s transition styles

• Create an interpage transition using the meta element


5

XPWorking with Image Objects


6


• Referencing an Inline Image– Each inline image is part of an array of images in

the document called the image collectiondocument.images[idref]

document.images.idref

– Other formsdocument.getElementBy(“id”)

document.name


7


• Referencing an Inline Image


8


• Creating an Image object– JavaScript treats all inline images as objects

known as image objects– To create a new image object

image = new Image(width, height);


9


• Properties of Image Objects


10


• Detecting Image Objects– It is possible that your users will be running a very

early browser version– Can use object detection to determine each user’s

level of browser support


11

XPCreating an Image Rollover

• An image rollover is created when you change the source of an inline image from one graphic file to another


12


• Preloading the Images– Performance is an important consideration when

creating a rollover effect– Can preload all of the image objects a user may

need, storing the images in the browser’s memory– It is often more efficient to store your image

objects in arrays


13


• Preloading the Images– Example


14


• Swapping Image Objects– Once the images are preloaded, you can use

JavaScript to swap the source for one image with the source for another


15


• Running the Image Rollover


16

XPCreating a Text Rollover

• Using the Hover Pseudo-Classa:hover {styles}– Example

a:hover {color: red; font-weight:bold}

• General Text Rollovers– Modify the style properties of an element in

response to the rollover event


17

XPWorking with Menus


18


• Creating a Pop-Up Menu– In a pop-up menu, a user clicks an object on the

page and the menu appears, sometimes elsewhere on the page


19


• Creating a Pull-Down Menu– In a pull-down menu, part of the menu is visible– When a user clicks the visible part, the rest of the

menu is revealed


20

XPCreating Pop-Up Menu Functions


21


• Displaying Menu Contents


22


• Calling the Menu Functions


23


• Calling the Menu Functions


24

XPWorking with Internet Explorer Filters

• A filter is an effect that is applied to an object or page to change its appearance

• Is applied by adding a filter style to the Web page’s style sheet or by running a JavaScript command that applies a filter to an object


25


• Applying Filters by Using Styles– In version 4.0

filter: filter_name(params)

– In versions 5.5 and abovefilter: progid:DXImageTransorm.Microsoft.filter_name(params)


26



27


• Applying Filters by Using Styles


28


• Applying Filters by Using Styles


29


• Running Filters with JavaScriptobject.style.filter = “filter text”;– Internet Explorer’s version of JavaScript also

recognizes the filter collectionobject.filters[idref]

object.filters[“name”]

– You can reference specific parameters within each filter usingfilter.param


30


• Adding a Filter Effect to the Plays Page


31


• Using a Light Filter– In 4.0

filter: Light()

– In 5.5 or betterFilter: progid:DKImageTransform.Microsoft.Light()

– To add ambient lightobject.filters.Light.addAmbient(red, green, blue,

strength)


32


• Using a Light Filter– To add a point light source

object.filters.Light.addPoint(x, y, z, red, green, blue, strength)

– To add a light source that shines at an angleobject.filters.Light.addCone(x, y, z, x2, y2, red, green, blue, strength, spread)

– To move the light source to another locationobject.filters.Light.moveLight(light, x, y, z, absolute)


33


• Using a Light Filter– To change the color of the light

object.filters.Light.changeColor(light, red, green, blue, absolute)

– To change the intensity of the light sourceobject.filters.Light.changeStrength(light, strength, absolute)

– To remove all of the light sourcesobject.filters.Light.clear()


34

XPWorking with Transitions

• A transition is a visual effect that is applied to an object over an interval of time

• Applying Transition Styles– A blend transition is a transition in which one

object is blended into anotherfilter: blendTrans(duration = value)

– A reveal transition is a more general transition in which a visual effect is applied as one object is changed into anotherfilter: revealTrans(duration = value)


35


• Applying Transition Styles


36



37


• Applying Transition Styles


38


• Scripting Transitions– Code for scripting a transition follows the same

syntax used for filters


39


• Running a Transition– Involves four steps

• Setting the initial state of the object• Applying a transition to the object• Specifying the final state of the object• Playing the transition


40


• Adding a Transition to the Plays Page


41


• Adding a Transition to the Plays Page


42


• Using Interpage Transitions– Interpage transitions involve effects applied to a

page when a browser either enters or exits the page

<meta http-equiv = “Page-Enter” content = “type” />

<meta http-equiv = “Page-Exit” content = “type” />

<meta http-equiv = “Site-Enter” content = “type” />

<meta http-equiv = “Site-Exit” content = “type” />


43

XPTips for working with Special Effects

• Preload all images used in image rollovers to speed up the rollover effect

• Place rollover images in image arrays to make it easier to write programs that swap the images

• Place long lists of links into pop-up or pull-down menus to save screen space


44

XPTips for working with Special Effects

• Place filter styles in separate style declarations to avoid problems with older browsers

• If you use filter or transition styles, test your Web site on non-Internet Explorer browsers to ensure that their use does not cause problems for those browsers

Documents

XP Tutorial 12 New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Working with Special Effects Creating Rollovers, Menus, Filters, and Transitions