BC457Chapter 56Application: Cross-Browser DHTML Map Puzzle

Lower 48 U.S. Map Puzzle 

---

Next come tags for all of the divelements. The styleattribute for the bgmapdivlets scriptsread the positioned values to assist in calculating positions in the onTarget()function, asshown previously. The bgmaplayer also contains all labels so that if the design calls for mov- ing the map to another part of the page, the labels follow automatically. Notice how the low- ercase state abbreviations are part of the names of both the label and map layers. As you sawin a few functions shown previously, a systematic approach to object naming can offer power- ful shortcuts in determining references to elements.

In developing this application, I encountered an unfriendly NN4 bug. When defining the helppanel as a positioned divelement in NN4, the browser exhibited unwanted behavior after theinstruction panel was shown and flown into place under script control. Even after hiding thehelp layer, the page no longer received mouse events, making it impossible to pick up a statemap after the instructions appeared. The problem did not surface, however, if the help objectwas defined in the document with a tag. Therefore, I did what I don t like to do unless absolutely necessary: I created branches inthecontent that used document.write()to create the same content with different HTMLsyntax, depending on the browser. For non-layerbrowsers, the page creates the same kindof block (with the