DHTML Utopia Modern Web Design Using JavaScript & DOM- P4:In a single decade, the Web has evolved from a simple method of delivering technical documents to an essential part of daily life, making and breaking relationships and fortunes along the way. “Looking something up on the Internet,” by which is almost always meant the Web, is now within reach of almost anyone living in a first-world country, and the idea of conducting conversations and business (and probably orchestras) in your Web browser is no longer foreign, but part of life | Chapter 2 The Document Object Model The code for mouseover starts like this File excerpt var target findTarget e if target return We call the findTarget function described above to get a reference to the link over which the mouse is located. If no element is returned we give up degrading gracefully. Otherwise we have the moused-over a tag in target. Next we dig out the image. File excerpt var img_tag 0 We also know that the a tag has one and only one child node and that s an img tag. We know this because we checked that this was the case when we set up the event handler in setupRollovers. File excerpt . A. _over 1 Images have a src attribute which you can access through the DOM with the element s src property. In the code snippet above we apply a regular expression substitution to that Changing the value of an img tag s src attribute causes it to reload itself with the new image thus making this substitution replacing with causes the original image to change to the rollover image. The mouseout function does the exact opposite it changes the reference to in the image s src attribute to causing the original image to reappear. Something for Nothing Almost If you look at the code for this modular rollover you ll see that it s divided into parts. The setupRollovers function does nothing but install listeners. The findTarget function does nothing but find the link tag for a given event. The mouseover and mouseout functions do little other than the actual image swapping work. The tasks are neatly divided. 13 Although the full details of regular expressions are beyond the scope of this book we ll look at the basics in Chapter 6. A more detailed resource is Kevin Yank s article on Regular Expressions in JavaScript http article . 40 Licensed to .
