Tutorial 5 New Perspectives on JavaScript, Comprehensive 1 XP Tutorial 5 Working with Special Effects Creating Rollovers, Menus, Filters, and Transitions
Jan 18, 2018
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