Soul music timeline

Main URL: www.ajc.com/living/0602/30soul.html
Popup URL: www.ajc.com/living/0602/30soul/timeline.html
Date: June 30, 2002

This is a popup-window Web version of a timeline that ran with an article on “unfamiliar gems” of soul music. In print, the timeline was oriented vertically and took up the entire height of a broadsheet page; obviously, a different format was required for the Web. The project takes advantage of an image “callouts” Javascript that I wrote for The Phoenix in February 2002 for packages on construction of a new science center and athletic field turf. As a visitor moves the mouse around the faces, descriptions (and for the groups, larger photos) pop up over the timeline.

Screenshot:

How the Javascript works: After creating the background image, an online producer calculates X and Y coordinates of the image’s “hot spots.” Those coordinates are then embedded in a script in the page, while the arbitrary HTML for each popup “callout” is enclosed in DIV tags. As long as the user’s mouse is over the background image, the script pops up the callout with the hot spot closest to the mouse pointer. As long as Javascript is enabled, it works without plug-ins on version 4 and above of both Netscape and Internet Explorer.