XP Tutorial 5 New Perspectives on JavaScript, Comprehensive1 Working with Special Effects Creating...

Tutorial 5 New Perspectives on JavaScript, Comprehensive 1

XP

Tutorial 5

Working with Special Effects

Creating Rollovers, Menus, Filters, and Transitions


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


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


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


XPWorking with Image Objects



• 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



• Referencing an Inline Image



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



• Properties of Image Objects



• 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


XPCreating an Image Rollover

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



• 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



• Preloading the Images– Example



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

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



• Running the Image Rollover


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


XPWorking with Menus



• 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



• 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


XPCreating Pop-Up Menu Functions



• Displaying Menu Contents



• Calling the Menu Functions


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



• Applying Filters by Using Styles– In version 4.0

filter: filter_name(params)– In versions 5.5 and above

filter: progid:DXImageTransorm.Microsoft.filter_name(params)



• Applying Filters by Using Styles



• 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



• Adding a Filter Effect to the Plays Page



• Using a Light Filter– In 4.0

filter: Light()– In 5.5 or better

Filter: progid:DKImageTransform.Microsoft.Light()

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



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



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


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)



• Applying Transition Styles



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

syntax used for filters



• 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



• Adding a Transition to the Plays Page



• 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” />


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


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

XP Tutorial 5 New Perspectives on JavaScript, Comprehensive1 Working with Special Effects Creating...

Documents

Transcript of XP Tutorial 5 New Perspectives on JavaScript, Comprehensive1 Working with Special Effects Creating...