Debriefing

Aaron Weiss

January 19, 1999

The client, as cherished customer (i.e. "rent money"), lays the groundwork, or gauntlet, as it were. In this particular tale, the battlefield looks as follows: client runs a web site which contains articles on various topics of interest to a niche group of readers. Each page in the site replicates a table-of-contents wrapper which allows quick navigation to each topic contained within the site. Because each topic may contain several articles, client would like a quick way for the user to navigate directly to a particular article within a particular topic -- the proposed solution being pop-up menus which appear beside each topic when triggered and contain links to each article within said topic.

Rules of engagement:

The pop-up menus must be created using DHTML because Java and plug-in solution are too heavy for this client's tastes; only versions 4+ of Navigator and Internet Explorer need to support these value-added pop-ups.
Because the table-of-contents boilerplate appears on every page courtesy of a server-side include, the code for the pop-ups must also reside within this server-side include (whose contents wind up within a cell of a table when pulled into the overall page);
Needing periodic maintenance, the links in each pop-up menu must be easy to modify for a non-programmer.

Visualization of target:

Thinking Aloud

The table of contents, contained in the left-hand cell, is a client-side imagemap composed of a single GIF, containing the image from "Annuities" down to "Sponsorship Info". Each topic name has been mapped out with coordinates, making it easy for us to hook some code onto the onMouseOver event handler for each area. The code comes to mind in a snap ...

Of course, "POPUP!" isn't really valid code, it simply illustrates wherefrom we can launch the script which does all the work. How, then, to create these menus? The screamingly obvious answer is to use layers, also known as CSS positioned blocks, the backbone of most DHTML techniques. The venerable layer allows us to construct a block of HTML as an independent entity from the page itself, able to reside anywhere, float above content, or remain hidden entirely. Layers are great fun, and terribly convenient ... unfortunately, like many bits of life which are the latter and/or the former, headaches ensue. Netscape and Microsoft do not cross-compatibly support layers which adds an additional dimension of complexity to our blueprint, as we must create layers which function equally in both browsers. Something to keep in mind.

The plan at this point sounds straightforward enough: create 13 layers, each one a menu for its respective topic. Within each layer there will be HTML containing hyperlinks to each article. When the page loads, the layers are created but hidden from view. When the user passes the mouse over an area of the imagemap the appropriate onMouseOver will trigger the appropriate layer to appear visible, located on the screen relative to the mouse coordinates at the moment of the onMouseOver event. Should the user move his mouse off the popped-up layer, it will become hidden once again.

Once this plan was mapped out the next step was to become self-satisfied and grab a bite to eat. The master plan was complete and only the puny details remained to be conquered.

DHTML Pop-Up Menus: A Parable of Triumph and Loss (Based on a True Story)
DHTML Pop-Up Menus: A Parable of Triumph and Loss (Based on a True Story)
Hubris 101

Up to => Home / Authoring / DHTML / Menus

Jupiter Online Media:

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and Jupiter Online Media

Jupitermedia Corporate Info

Legal Notices, Licensing, & Permissions, Privacy Policy.

Web Hosting | Newsletters | Tech Jobs | Shopping | E-mail Offers