1 / 44

Working with Special Effects

Discover new perspectives on HTML, XHTML, and DHTML while learning how to work with JavaScript, create image rollovers, design pop-up and pull-down menus, apply filter styles, and create interpage transitions.

bradsanchez
Download Presentation

Working with Special Effects

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Working with Special Effects Creating Rollovers, Menus, Filters, and Transitions New Perspectives on HTML, XHTML, and DHTML, Comprehensive

  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 New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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 New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  4. 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 New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  5. Working with Image Objects New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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.images[idref] document.images.idref • Other forms document.getElementBy(“id”) document.name New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  7. Working with Image Objects • Referencing an Inline Image New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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); New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  9. Working with Image Objects • Properties of Image Objects New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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 user’s level of browser support New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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 New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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 browser’s memory • It is often more efficient to store your image objects in arrays New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  13. Creating an Image Rollover • Preloading the Images • Example New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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 New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  15. Creating an Image Rollover • Running the Image Rollover New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  16. 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 New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  17. Working with Menus New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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 New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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 New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  20. Creating Pop-Up Menu Functions New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  21. Creating Pop-Up Menu Functions • Displaying Menu Contents New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  22. Creating Pop-Up Menu Functions • Calling the Menu Functions New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  23. Creating Pop-Up Menu Functions • Calling the Menu Functions New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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 page’s style sheet or by running a JavaScript command that applies a filter to an object New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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: progid:DXImageTransorm.Microsoft.filter_name(params) New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  26. Working with Internet Explorer Filters New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  27. Working with Internet Explorer Filters • Applying Filters by Using Styles New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  28. Working with Internet Explorer Filters • Applying Filters by Using Styles New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  29. 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 New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  30. Working with Internet Explorer Filters • Adding a Filter Effect to the Plays Page New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  31. 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) New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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) New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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() New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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) New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  35. Working with Transitions • Applying Transition Styles New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  36. Working with Transitions New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  37. Working with Transitions • Applying Transition Styles New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  38. Working with Transitions • Scripting Transitions • Code for scripting a transition follows the same syntax used for filters New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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 New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  40. Working with Transitions • Adding a Transition to the Plays Page New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  41. Working with Transitions • Adding a Transition to the Plays Page New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  42. 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” /> New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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 New Perspectives on HTML,XHTML, and DHTML, Comprehensive

  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 New Perspectives on HTML,XHTML, and DHTML, Comprehensive

More Related