New Perspectives on DHTML, 2e

1
Working with Special Effects

• DHTML Tutorial 3Creating Rollovers, Menus,
  Filters, and Transitions

2
Objectives

• Create and work with image objects
• Create image rollovers
• Learn about text rollovers
• Learn about and create pop-up and pull-down menus

3
Objectives

• Work with Internet Explorers filters and
  transitions
• Create interpage transitions

4
Working with Image Objects

• A rollover effect is achieved by changing a
  graphical image when a mouse pointer moves over
  an object on the page
• Knowledge of how DHTML creates and manages image
  objects is necessary to create a rollover

5
Referencing an Image Object

• To reference an imagedocument.ImageName
• Where ImageName is name of the image
• This approach works for all DOMs with the
  exception of nested objects in the NS4 DOM

6
Referencing an Image Object

• You may also usedocument.imagesi
• Where i is the index number of the image
• Use the images collection to create reusable
  code function ChangeImage(i)
• JavaScript commands to modify document.images(i)

7
Image Properties
8
Image Properties
9
Image Properties

• NS 4 DOMyou cannot change the appearance of an
  image once it is loaded
• IE and W3C DOMsyou can dynamically change the
  attributes of inline images

10
Image Event Handlers

• A rollover occurs when the mouse moves over an
  image
• The onMouseOver and onMouseOut events are
  commonly usedltimg nameSwap srcout.jpg
  onMouseOverthis.srcover.jpg
  onMouseOutthis.srcout.jpg /gt
• The keyword this refers to the current object

11
Image Event Handlers

• NS 4 does not support onMouseOver and onMouseOut
  for the ltimggt tag
• Use the ltagt tag with the href property lta
  hrefswap idswap onMouseOverdocument.Swa
  p.srcover.jpg onMouseOutdocument.Swap.src
  out.jpg gt
• ltimg nameSwap srcout.jpg border0 /gt
• lt/agt

12
Preloading Images

• Preloading images increases performance
• To store the image in the browsers cache
• Create an image object in the head section of the
  HTML page
• Specify the source of the image object

13
Preloading Images

• To create an image objectImageVariable new
  Image(width, height)
• Where ImageVariable is the name of the image
  object
• Where height and width are measurements in pixels
  and are optional
• To specify the source of an image
  objectImageVariable.src ImageFile
• Where ImageFile is the URL of the image object

14
Preloading Images

• Arrays are more efficient
• Write functions to access images by the index
  number

• var ImgOver new Array()ImgOver0 new
  Image() ImgOver1 new Image()ImgOver2
  new Image() ImgOver0.src over1.jpgImgOve
  r1.src over2.jpg ImgOver2.src
  over3.jpg

15
Object Detection

• Use object detection to hide code from older
  browsers that lack support for image objects
• function RollOver(i)
• if (document.images)
• document.imagesi.src ImgOveri.src
• Where i is the index number of the inline image

16
Creating an Image Rollover
17
Text Rollovers

• Use the hover pseudo-class ahover style when
  the mouse is hovering
• Example
• ahover colorred font-weightbold
• This does not work with IE browsers prior to IE 5
  or with NS browsers prior to NS 6

18
Text Rollovers with the Internet Explorer and
W3C DOMs

• For IE 4 and above, modify the style properties
  in response to a rollover
• ltstylegt
• .Rollover color red font-weight bold
• lt/stylegt
• ltp onMouseOverthis.classNameRollOver
• onMouseOutthis.className gt The
  Globelt/pgt
• Using empty will set the object to its default
  appearance

19
Text Rollovers with Netscape 4

• For NS 4, first enclose text between ltlayergt
  tags
• ltlayer nameGlobe onMouseOver
  Over()onMouseOut Out()gt The Globelt/layergt

20
Text Rollovers with Netscape 4

• Then, use document.write() and document.close()
  methods
• function Over() document.Globe.document.write(f
  ont colorredgtltbgtThe Globelt/bgtlt/fontgt)docum
  ent.Globe.document.close()
• function Out() document.Globe.document.write(Th
  e Glove)document.Globe.document.close()

21
Working with Menus
22
Creating a Pop-Up Menu

• User clicks on an object and the menu appears
• Place menu contents within a set of ltdivgt tags
• Use JavaScript to change the visibility attribute

23
Pull-Down Menus

• User clicks on part of the menu and the rest
  appears
• Place the contents within a set of ltdivgt tags
• Use JavaScript to change the clip attribute

24
Creating Functions for the Pop-Up Menu

• To display and hide ltdivgt elements in NS 4
  DOMdocument.id.visibility hidedocument.id.v
  isibility show
• In the IE DOMid.style.visibility
  hiddenid.style.visibility visible
• In the W3C DOMdocument.getElementById(id).styl
  e.visibilityhiddendocument.getElementById(id
  ).style.visibilityvisible

25
Displaying Menu Contents

• To display a menu, create a function that will
• Hide the active menu
• Display the menu indicated by the users actions
• Make this menu the active menu
• Call this function using the onMouseOver event
  handler

26
Displaying Menu Contents
27
Displaying Menu Contents
28
Working with Filters in Internet Explorer

• A filter is an effect that is applied to an
  object or page to change its appearance
• Transparency
• Drop shadows
• Masking effects

29
Working with Filters in Internet Explorer

• In IE 4.0, filters may be applied only to the
  following elements
• ltdivgt and ltspangt (with a defined height, width or
  absolute position)
• ltimggt and ltmarqueegt
• ltbuttongt, ltinputgt, and lttextareagt
• lttablegt, lttrgt, ltthgt lttdgt, lttheadgt, lttfootgt

30
Applying Filters by Using Styles

• To apply a filter in IE 4.0filter
  filter_name(params)
• Where filter_name is the name for the IE 4.0
  filter
• Where params are required values (if any) that
  apply to the filter
• To apply a filter in IE 5.5 and upfilter
  progidDXImageTransform.Microsoft.filter_name(para
  ms)

31
Applying Filters by Using Styles

• IE 5.5 provides more filter effects than does IE
  4.0
• IE 5.5 supports IE 4.0 filters
• If compatibility is a consideration, use IE 4.0
  filters

32
Using a Light Filter

• The Light filter presents the illusion of light
• To create a light source filter in IE
  4.0filter Light()
• In IE 5.5 and abovefilter progidDXImageTransfo
  rm.Microsoft.Light()
• Once the filter is created, the object must be
  illuminated usingaddAmbient(), addPoint(), or
  addCone()

33
Using a Light Filter

• To apply an ambient lightobject.filters.Light.ad
  dAmbient(red,green,blue, strength)
• To create a light source hovering directly
  aboveobject.filters.Light.addPoint(x, y, z,
  red, green, blue, strength)
• To shine a light source at an angleobject.filter
  s.Light.addCone(x, y, z, x2, y2, red, green,
  blue, strength, spread)

34
Using a Light Filter

• To change a light filter
• object.filters.Light.moveLight(light, x, y, z,
  absolute)
• object.filters.Light.changeColor(light, red,
  green, blue, absolute)
• object.filters.Light.changeStrength(light,
  strength, absolute)
• To remove the effect of a light source, set
  strength to 0
• To remove all of the light sources applied to an
  objectobject.filters.Light.clear()

35
Applying Filters Using JavaScript

• IE filter styles in CSS cause problems in NS 4
• Use JavaScript to apply IE filter styles
• Apply a filter using a text stringobject.style.f
  ilter filter string
• Where object is the name of the object on the
  page
• Where filter string is the filter name and
  parameters

36
Applying Filters Using JavaScript

• You may also treat the filter as part of the
  DOM
• object.filtersindex.parameter value
• or
• object.filtersfilter_name.parameter value
• Where object is the name of the object containing
  filters
• Where index is the index number of the filter
• Where filter_name is the name of the filter
• Where parameter is the name of the filter
  parameter

37
Creating a Rollover Effect with Filters

• Apply a filter for the onMouseOver event
• Remove the filter for the onMouseOut event

38
Adding a Filter Effect to the Plays Page
39
Working with Transitions in Internet Explorer

• A transition is a visual effect applied over time
• IE 4.0 and IE 5.5 follow different syntax as in
  filters

40
Blend and Reveal Transitions (IE 4.0)

• A blend transition blends one object into
  anotherfilter blendTrans(Duration value)
• Where value is the time in seconds
• A reveal transition provides choices for the
  transition effectfilter revealTrans(Duration
  value, Transition type)
• Where type is a number from 0 to 23 specifying
  the transition effect

41
Blend and Reveal Transitions (IE 5.5)

• To create a transition in IE 5.5 and
  abovefilter progidDXImageTransform.Microsoft.t
  ransition_name(parameters)
• Where transition_name is the name of the
  transition
• Where parameters are parameters used with that
  transition

42
Scripting Transitions

• Syntax for scripting transitions follows the same
  syntax as for filtersobject.style.filter
  progidDXImageTransform.Microsoft.transition_nam
  e(parameters)
• Where transition_name is the name of the
  transition
• Where parameters are parameters used with that
  transition

43
Running a Transition

• After a transition has been defined
• Set the initial state of the object(can include
  visibility, image source or HTML code)
• Apply a transition to the object
  object.filtersfilter.apply()
• Specify the final state of the object(the state
  of the object after the transition)
• Play the transitionobject.filtersfilter.play(du
  ration)

44
Adding a Transition to the Plays Page

• Use IE transitions to give the illusion of a menu
  unwrapping
• For IE 4.0, use the Wipe Down transition
• For IE 5.5 and above, usethe Blinds transition

45
Using Interpage Transitions

• Interpage transitions are created using the
  ltmetagt tag
• ltmeta http-equiv Page-Enter content
  transition_type /gt
• ltmeta http-equiv Page-Exit content
  transition_type /gt
• ltmeta http-equiv Site-Enter content
  transition_type /gt
• ltmeta http-equiv Site-Exit content
  transition_type /gt
• Where transition_type is one of the transitions
  supported by Internet Explorer

46
Review

• Use the new keyword to create new image objects
• For image rollovers, preload images to speed up
  processing during the rollover
• To create text rollovers, the CSS pseudo-classes
  work for newer browsers
• For text rollovers in older browsers, other
  approaches must be taken

47
Review

• To create a pop-up menu, toggle the visibility
  property
• To create a pull-down menu, clip the object to
  hide and reveal menu options
• Use Internet Explorers proprietary features to
  apply filters and page transitions