New Perspectives on HTML, XHTML, and DHTML, Comprehensive

1
Working with Special Effects

• Creating Rollovers, Menus, Filters, and
  Transitions

2
Objectives

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

4
Objectives

• Understand and implement Internet Explorers
  filter styles
• Understand and apply Internet Explorers
  transition styles
• Create an interpage transition using the meta
  element

5
Working with Image Objects
6
Working with Image Objects

• Referencing an Inline Image
• Each inline image is part of an array of images
  in the document called the image collection
• document.imagesidref
• document.images.idref
• Other forms
• document.getElementBy(id)
• document.name

7
Working with Image Objects

• Referencing an Inline Image

8
Working 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)

9
Working with Image Objects

• Properties of Image Objects

10
Working 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 users
  level of browser support

11
Creating an Image Rollover

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

12
Creating 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 browsers memory
• It is often more efficient to store your image
  objects in arrays

13
Creating an Image Rollover

• Preloading the Images
• Example

14
Creating 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

15
Creating an Image Rollover

• Running the Image Rollover

16
Creating a Text Rollover

• Using the Hover Pseudo-Class
• ahover styles
• Example
• ahover color red font-weightbold
• General Text Rollovers
• Modify the style properties of an element in
  response to the rollover event

17
Working with Menus
18
Working 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

19
Working 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

20
Creating Pop-Up Menu Functions
21
Creating Pop-Up Menu Functions

• Displaying Menu Contents

22
Creating Pop-Up Menu Functions

• Calling the Menu Functions

23
Creating Pop-Up Menu Functions

• Calling the Menu Functions

24
Working 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
  pages style sheet or by running a JavaScript
  command that applies a filter to an object

25
Working with Internet Explorer Filters

• Applying Filters by Using Styles
• In version 4.0
• filter filter_name(params)
• In versions 5.5 and above
• filter progidDXImageTransorm.Microsoft.filter_na
  me(params)

26
Working with Internet Explorer Filters
27
Working with Internet Explorer Filters

• Applying Filters by Using Styles

28
Working with Internet Explorer Filters

• Applying Filters by Using Styles

29
Working with Internet Explorer Filters

• Running Filters with JavaScript
• object.style.filter filter text
• Internet Explorers version of JavaScript also
  recognizes the filter collection
• object.filtersidref
• object.filtersname
• You can reference specific parameters within each
  filter using
• filter.param

30
Working with Internet Explorer Filters

• Adding a Filter Effect to the Plays Page

31
Working with Internet Explorer Filters

• Using a Light Filter
• In 4.0
• filter Light()
• In 5.5 or better
• Filter progidDKImageTransform.Microsoft.Light()
• To add ambient light
• object.filters.Light.addAmbient(red, green, blue,
• strength)

32
Working 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 angle
• object.filters.Light.addCone(x, y, z, x2, y2,
  red, green, blue, strength, spread)
• To move the light source to another location
• object.filters.Light.moveLight(light, x, y, z,
  absolute)

33
Working 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 source
• object.filters.Light.changeStrength(light,
  strength, absolute)
• To remove all of the light sources
• object.filters.Light.clear()

34
Working 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 another
• filter blendTrans(duration value)
• A reveal transition is a more general transition
  in which a visual effect is applied as one object
  is changed into another
• filter revealTrans(duration value)

35
Working with Transitions

• Applying Transition Styles

36
Working with Transitions
37
Working with Transitions

• Applying Transition Styles

38
Working with Transitions

• Scripting Transitions
• Code for scripting a transition follows the same
  syntax used for filters

39
Working 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

40
Working with Transitions

• Adding a Transition to the Plays Page

41
Working with Transitions

• Adding a Transition to the Plays Page

42
Working with Transitions

• Using Interpage Transitions
• Interpage transitions involve effects applied to
  a page when a browser either enters or exits the
  page
• ltmeta http-equiv Page-Enter content type
  /gt
• ltmeta http-equiv Page-Exit content type
  /gt
• ltmeta http-equiv Site-Enter content type
  /gt
• ltmeta http-equiv Site-Exit content type /gt

43
Tips 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
Tips 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