Sex offenders web site - Images andDynamic HTMLThe previous eight lessons have been
Images andDynamic HTMLThe previous eight lessons have been intensive, covering a lot ofground for both programming concepts and JavaScript. Now it stime to apply those fundamentals to the learning of more advancedtechniques. I cover two areas here. First, I show you how to imple- ment the ever-popular mouse rolloverin which images swap when theuser rolls the cursor around the screen. Then I introduce you to tech- niques for modifying a page s content after the page has loaded. The Image ObjectOne of the objects contained by the document is the image object supported in all scriptable browsers since the days of NN3 and IE4. Image object references for a document are stored in the objectmodel as an array belonging to the documentobject. You can there- fore reference an image by array index or image name. Moreover, thearray index can be a string version of the image s name. Thus, all ofthe following are valid references to an image object: document.images[n] document.images[ imageName ] document.imageNameIf your goal is to support scriptable images for browsers such as NN3and NN4, you must be aware of image object limitations for thosebrowsers. In particular, the range of scriptable properties is limited, although the all-important srcproperty is accessible. Also, nomouse-related event handlers are affiliated with the image object(until you get to IE4+ and NN6+). If you want to make an image a clickable item in older browsers, surround it with a link (and settheimage s border to zero) or attach a client-side image map to it. The combination of a link and image is how you make a backward- compatible clickable image button. Interchangeable imagesThe advantage of having a scriptable image object is that a script canchange the image occupying the rectangular space already occupiedby an image. In IE4+ and NN6+, the images can even change size, withsurrounding content automatically reflowing around the resized image. 1212CHAPTER …In This ChapterHow to precacheimagesHow to swap imagesfor mouse rolloversAssigning scripts as URLsModifying Body contentdynamically …