xp tutorial 5 new perspectives on javascript, comprehensive1 working with special effects creating...
DESCRIPTION
XP Tutorial 5New Perspectives on JavaScript, Comprehensive3 Objectives Understand how to create text rollovers Understand how to work with pop-up and pull-down menus Hide and unhide objects in a Web pageTRANSCRIPT
Tutorial 5 New Perspectives on JavaScript, Comprehensive 1
XP
Tutorial 5
Working with Special Effects
Creating Rollovers, Menus, Filters, and Transitions
Tutorial 5 New Perspectives on JavaScript, 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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 5
XPWorking with Image Objects
Tutorial 5 New Perspectives on JavaScript, Comprehensive 6
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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 7
XPWorking with Image Objects
• Referencing an Inline Image
Tutorial 5 New Perspectives on JavaScript, Comprehensive 8
XPWorking with Image Objects
• 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);
Tutorial 5 New Perspectives on JavaScript, Comprehensive 9
XPWorking with Image Objects
• Properties of Image Objects
Tutorial 5 New Perspectives on JavaScript, Comprehensive 10
XPWorking with 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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 12
XPCreating an Image Rollover
• 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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 13
XPCreating an Image Rollover
• Preloading the Images– Example
Tutorial 5 New Perspectives on JavaScript, Comprehensive 14
XPCreating an Image Rollover
• Swapping Image Objects– Once the images are preloaded, you can use
JavaScript to swap the source for one image with the source for another
Tutorial 5 New Perspectives on JavaScript, Comprehensive 15
XPCreating an Image Rollover
• Running the Image Rollover
Tutorial 5 New Perspectives on JavaScript, Comprehensive 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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 17
XPWorking with Menus
Tutorial 5 New Perspectives on JavaScript, Comprehensive 18
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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 19
XPWorking with Menus
• 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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 20
XPCreating Pop-Up Menu Functions
Tutorial 5 New Perspectives on JavaScript, Comprehensive 21
XPCreating Pop-Up Menu Functions
• Displaying Menu Contents
Tutorial 5 New Perspectives on JavaScript, Comprehensive 22
XPCreating Pop-Up Menu Functions
• Calling the Menu Functions
Tutorial 5 New Perspectives on JavaScript, Comprehensive 23
XPCreating Pop-Up Menu Functions
• Calling the Menu Functions
Tutorial 5 New Perspectives on JavaScript, Comprehensive 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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 25
XPWorking with Internet Explorer Filters
• 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)
Tutorial 5 New Perspectives on JavaScript, Comprehensive 26
XPWorking with Internet Explorer Filters
Tutorial 5 New Perspectives on JavaScript, Comprehensive 27
XPWorking with Internet Explorer Filters
• Applying Filters by Using Styles
Tutorial 5 New Perspectives on JavaScript, Comprehensive 28
XPWorking with Internet Explorer Filters
• Applying Filters by Using Styles
Tutorial 5 New Perspectives on JavaScript, Comprehensive 29
XPWorking with Internet Explorer Filters
• 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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 30
XPWorking with Internet Explorer Filters
• Adding a Filter Effect to the Plays Page
Tutorial 5 New Perspectives on JavaScript, Comprehensive 31
XPWorking with Internet Explorer Filters
• 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)
Tutorial 5 New Perspectives on JavaScript, Comprehensive 32
XPWorking with Internet Explorer Filters
• 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)
Tutorial 5 New Perspectives on JavaScript, Comprehensive 33
XPWorking with Internet Explorer Filters
• 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()
Tutorial 5 New Perspectives on JavaScript, Comprehensive 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)
Tutorial 5 New Perspectives on JavaScript, Comprehensive 35
XPWorking with Transitions
• Applying Transition Styles
Tutorial 5 New Perspectives on JavaScript, Comprehensive 36
XPWorking with Transitions
Tutorial 5 New Perspectives on JavaScript, Comprehensive 37
XPWorking with Transitions
• Applying Transition Styles
Tutorial 5 New Perspectives on JavaScript, Comprehensive 38
XPWorking with Transitions
• Scripting Transitions– Code for scripting a transition follows the same
syntax used for filters
Tutorial 5 New Perspectives on JavaScript, Comprehensive 39
XPWorking with Transitions
• 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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 40
XPWorking with Transitions
• Adding a Transition to the Plays Page
Tutorial 5 New Perspectives on JavaScript, Comprehensive 41
XPWorking with Transitions
• Adding a Transition to the Plays Page
Tutorial 5 New Perspectives on JavaScript, Comprehensive 42
XPWorking with Transitions
• 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” />
Tutorial 5 New Perspectives on JavaScript, Comprehensive 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
Tutorial 5 New Perspectives on JavaScript, Comprehensive 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