Working with Special Effects

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 • 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 • Understand and implement Internet Explorer’s filter styles • Understand and apply Internet Explorer’s transition styles

3. Working with Image Objects

4. 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.images[idref] document.images.idref • Other forms document.getElementBy(“id”) document.name

5. Working with Image Objects • Referencing an Inline Image

6. 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);

7. Working with Image Objects • Properties of Image Objects

8. 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 user’s level of browser support

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

10. 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 browser’s memory • It is often more efficient to store your image objects in arrays

11. Creating an Image Rollover • Preloading the Images • Example

12. 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

13. Creating an Image Rollover • Running the Image Rollover

14. Creating a Text Rollover • Using the Hover Pseudo-Class a: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

15. Working with Menus

16. 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

17. 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

18. Creating Pop-Up Menu Functions

19. Creating Pop-Up Menu Functions • Displaying Menu Contents

20. Creating Pop-Up Menu Functions • Calling the Menu Functions

21. Creating Pop-Up Menu Functions • Calling the Menu Functions

22. 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 page’s style sheet or by running a JavaScript command that applies a filter to an object

23. 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: progid:DXImageTransorm.Microsoft.filter_name(params)

24. Working with Internet Explorer Filters

25. Working with Internet Explorer Filters • Applying Filters by Using Styles

26. Working with Internet Explorer Filters • Applying Filters by Using Styles

27. Working with Internet Explorer Filters • Running Filters with JavaScript object.style.filter = “filter text”; • Internet Explorer’s version of JavaScript also recognizes the filter collection object.filters[idref] object.filters[“name”] • You can reference specific parameters within each filter using filter.param

28. Working with Internet Explorer Filters • Adding a Filter Effect to the Plays Page

29. Working 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 light object.filters.Light.addAmbient(red, green, blue, strength)

30. 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)

31. 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()

32. 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)

33. Working with Transitions • Applying Transition Styles

34. Working with Transitions

35. Working with Transitions • Applying Transition Styles

36. Working with Transitions • Scripting Transitions • Code for scripting a transition follows the same syntax used for filters

37. 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

38. Working with Transitions • Adding a Transition to the Plays Page

39. Working with Transitions • Adding a Transition to the Plays Page

40. Working 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” />

41. 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

42. 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