JavaScript® Bible, Seventh Edition

Chapter 59. Application: Cross-Browser DHTML Map Puzzle

IN THIS CHAPTER

• Applying a DHTML API

• Scripting, dragging, and layering multiple elements

• Accounting for incompatibilities among modern browsers

Dynamic HTML (DHTML) allows scripts to position, overlap, and hide or show elements under the control of style sheets and scripting. To demonstrate modern cross-browser DHTML development techniques, this chapter describes the details of a jigsaw puzzle game using pieces of a map of the lower 48 United States. (I think everyone would guess where Alaska and Hawaii go on a larger map of North America.) I chose this application because it enables me to demonstrate several typical tasks you might want to script in DHTML: hiding and showing elements; handling events for multiple elements; tracking the position of an element with the mouse cursor; absolute positioning of elements; changing the z-order of elements; changing element colors; and animating the movement of elements.

You may wonder why it is necessary to deal with cross-browser issues in the modern browser era, when so many things have now been standardized thanks to the W3C DOM. Although the W3C DOM has certainly bridged many compatibility gaps among browsers, it still isn't quite yet feasible to build highly interactive JavaScript applications without accounting for subtle differences between browsers. The puzzle game examined in this chapter reveals many of these subtle issues and how to go about handling them as cleanly as possible. ...