137Chapter 12Images and (Free web design) Dynamic HTMLYou can see the
137Chapter 12Images and Dynamic HTMLYou can see the results of this lengthy script in Figure 12-1. As the user rolls the mouse atopone of the images, it changes from a light to dark color by swapping the entire image. You canaccess the image files on the CD-ROM, and I encourage you to enter this lengthy listing andsee the magic for yourself. Figure 12-1:Typical mouse rollover image swapping. The javascript: Pseudo-URLYou have seen several instances in this and previous chapters of applying what is called thejavascript:pseudo-URL to hrefattributes of and tags. This technique shouldbe used sparingly at best, especially for public Web sites that may be accessed by users withnon-scriptable browsers (for whom the links will be inactive). The technique was implemented to supplement the onclickevent handler of objects that actas hyperlinks. Especially in the early scripting days, when elements such as images had noevent handlers of their own, hyperlinked elements surrounding those inactive elementsallowed users to appear to interact directly with elements such as images. When the intendedaction was to invoke a script function (rather than navigate to another URL, as is usually thecase with a hyperlink), the language designers invented the javascript:protocol for use inassignments to the hrefattributes of hyperlink elements (instead of leaving the requiredattribute empty). When a scriptable browser encounters an hrefattribute pointing to a javascript:pseudo- URL, the browser executes the script content after the colon when the user clicks on the ele- ment. For example, near the end of Listing 12-2, all four tags point to javascript: pseudo-URLs that invoke script functions on the page, such as Be aware that unless you override the status bar text with mouse event handlers (as shownin Listing 12-2), the pseudo-URL appears in the status bar for the user to see (and perhaps befrightened). More importantly, however, remember that this URL is to be used only for assign- ment to hrefattributes. Do not use it with event handlers. Popular Dynamic HTML TechniquesBecause today s scriptable browsers uniformly permit scripts to access each element of thedocument and automatically reflow the page s content when anything changes, a much