1. XP Tutorial 5 New Perspectives on JavaScript, Comprehensive1 Working with Special Effects Creating Rollovers, Menus, Filters, and Transitions

2. XP Tutorial 5New Perspectives on JavaScript, Comprehensive2 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. 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 page

4. XP Tutorial 5New Perspectives on JavaScript, Comprehensive4 Objectives Understand and implement Internet Explorer’s filter styles Understand and apply Internet Explorer’s transition styles Create an interpage transition using the meta element

5. XP Tutorial 5New Perspectives on JavaScript, Comprehensive5 Working with Image Objects

6. XP Tutorial 5New Perspectives on JavaScript, Comprehensive6 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

7. XP Tutorial 5New Perspectives on JavaScript, Comprehensive7 Working with Image Objects Referencing an Inline Image

8. XP Tutorial 5New Perspectives on JavaScript, Comprehensive8 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. XP Tutorial 5New Perspectives on JavaScript, Comprehensive9 Working with Image Objects Properties of Image Objects

10. XP Tutorial 5New Perspectives on JavaScript, Comprehensive10 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

11. XP Tutorial 5New Perspectives on JavaScript, Comprehensive11 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. XP Tutorial 5New Perspectives on JavaScript, Comprehensive12 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

13. XP Tutorial 5New Perspectives on JavaScript, Comprehensive13 Creating an Image Rollover Preloading the Images –Example

14. XP Tutorial 5New Perspectives on JavaScript, Comprehensive14 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. XP Tutorial 5New Perspectives on JavaScript, Comprehensive15 Creating an Image Rollover Running the Image Rollover

16. XP Tutorial 5New Perspectives on JavaScript, Comprehensive16 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

17. XP Tutorial 5New Perspectives on JavaScript, Comprehensive17 Working with Menus

18. XP Tutorial 5New Perspectives on JavaScript, Comprehensive18 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. XP Tutorial 5New Perspectives on JavaScript, Comprehensive19 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. XP Tutorial 5New Perspectives on JavaScript, Comprehensive20 Creating Pop-Up Menu Functions

21. XP Tutorial 5New Perspectives on JavaScript, Comprehensive21 Creating Pop-Up Menu Functions Displaying Menu Contents

22. XP Tutorial 5New Perspectives on JavaScript, Comprehensive22 Creating Pop-Up Menu Functions Calling the Menu Functions

23. XP Tutorial 5New Perspectives on JavaScript, Comprehensive23 Creating Pop-Up Menu Functions Calling the Menu Functions

24. XP Tutorial 5New Perspectives on JavaScript, Comprehensive24 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

25. XP Tutorial 5New Perspectives on JavaScript, Comprehensive25 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)

26. XP Tutorial 5New Perspectives on JavaScript, Comprehensive26 Working with Internet Explorer Filters

27. XP Tutorial 5New Perspectives on JavaScript, Comprehensive27 Working with Internet Explorer Filters Applying Filters by Using Styles

28. XP Tutorial 5New Perspectives on JavaScript, Comprehensive28 Working with Internet Explorer Filters Applying Filters by Using Styles

29. XP Tutorial 5New Perspectives on JavaScript, Comprehensive29 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

30. XP Tutorial 5New Perspectives on JavaScript, Comprehensive30 Working with Internet Explorer Filters Adding a Filter Effect to the Plays Page

31. XP Tutorial 5New Perspectives on JavaScript, Comprehensive31 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)

32. XP Tutorial 5New Perspectives on JavaScript, Comprehensive32 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. XP Tutorial 5New Perspectives on JavaScript, Comprehensive33 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. XP Tutorial 5New Perspectives on JavaScript, Comprehensive34 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. XP Tutorial 5New Perspectives on JavaScript, Comprehensive35 Working with Transitions Applying Transition Styles

36. XP Tutorial 5New Perspectives on JavaScript, Comprehensive36 Working with Transitions

37. XP Tutorial 5New Perspectives on JavaScript, Comprehensive37 Working with Transitions Applying Transition Styles

38. XP Tutorial 5New Perspectives on JavaScript, Comprehensive38 Working with Transitions Scripting Transitions –Code for scripting a transition follows the same syntax used for filters

39. XP Tutorial 5New Perspectives on JavaScript, Comprehensive39 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. XP Tutorial 5New Perspectives on JavaScript, Comprehensive40 Working with Transitions Adding a Transition to the Plays Page

41. XP Tutorial 5New Perspectives on JavaScript, Comprehensive41 Working with Transitions Adding a Transition to the Plays Page

42. XP Tutorial 5New Perspectives on JavaScript, Comprehensive42 Working with Transitions Using Interpage Transitions –Interpage transitions involve effects applied to a page when a browser either enters or exits the page

43. XP Tutorial 5New Perspectives on JavaScript, Comprehensive43 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. XP Tutorial 5New Perspectives on JavaScript, Comprehensive44 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