1 / 6

The Web Wizard’s Guide To JavaScript

The Web Wizard’s Guide To JavaScript. Chapter 4 Image Swapping. Chapter Objectives. To learn how to code a simple rollover To find out how to preload image files into the browser’s cache folder. To learn how to create a navigation page with multiple rollover images

cotto
Download Presentation

The Web Wizard’s Guide To JavaScript

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. The Web Wizard’s Guide To JavaScript Chapter 4 Image Swapping

  2. Chapter Objectives • To learn how to code a simple rollover • To find out how to preload image files into the browser’s cache folder. • To learn how to create a navigation page with multiple rollover images • To understand how to create a double-rollover page

  3. Creating a Simple Rollover • It is possible to create a crude rollover effect by changing the SRC property of an <img> with a simple JavaScript statement in an onmouseover event handler. This technique is not recommended, however, because it produces a delay in loading the second image.

  4. Preloading Images • Preloading image files into the browser’s cache creates more effective rollovers and lets you expand your rollover code to accommodate multiple rollover images or even double rollovers. • Testing for the presence of the document.images array is an easy way to ensure that only those browsers that support the Image object will attempt to run your image swapping code.

  5. Multiple Rollover Images • By passing parameter values, you can create multiple rollover image swaps using a single function.

  6. Double Rollover • A double rollover changes two image files when the mouse is rolled on top of each image. • This interface enhancement gives the visitor additional information about each link when the mouse rolls over the linked image.

More Related