Friday, March 06, 2009
This Time Is Your Time
Blog Entry #138
(August 2016 Update: The usatimezonemap and zonenamesb3c96c19
<map>s at the www.time.gov site were discarded in the course of a redesign in February or March 2014.)To wrap up our discussion of image maps spanning Blog Entries #121, #122, #123, and #124, we will in this post deconstruct a real-world example, specifically, the image maps appearing at http://www.time.gov/, the home page of the U.S. Government's "Official U.S. Time" Web site. Here's a screen shot of the www.time.gov foreground:
Depending on your browser's support for Netscape's proprietary spacer element, you may or may not see the display's marigold-ish (#ffcd38) border, e.g., Firefox (which I was using when I captured the display) shows it but Opera does not.
Notwithstanding its appearance, the www.time.gov display contains no #PCDATA text but is composed entirely of images. Two of these images are mapped:
(1) The map2.gif image
is associated with a usatimezonemap map comprising sixteen area elements.
(2) The zonenames.gif image
is associated with a zonenamesb3c96c19 map comprising nine area elements.
Before we get started, I should mention that the www.time.gov source is 'distinguished' by a total absence of CSS and the use of four nested tables for layout purposes - one suspects Sir Tim would 'have an aneurysm' upon looking at this code - we'll sort out this situation after we go through the usatimezonemap and zonenamesb3c96c19 maps.
<map name="usatimezonemap"> ... </map>
In this section, I will reference the usatimezonemap map area elements per their source order as areas[0], areas[1], areas[2], etc. (As the area object is a type of link object, their actual object references would be document.links[0], document.links[1], document.links[2], ...)
Subchapter IX of Chapter 6 of Title 15 of the United States Code defines nine U.S. standard time zones, which are duly delineated in the map2.gif image by the usatimezonemap map; from east to west:
(1) areas[13] encompasses Puerto Rico and also Saint Thomas in the U.S. Virgin Islands, which observe Atlantic standard time (UTC-4) throughout the year;
(2) areas[15] traces the Eastern Time Zone (UTC-5 during standard time);
(3) areas[12] traces the Central Time Zone (UTC-6 during standard time);
(4) areas[11] traces the Mountain Time Zone (UTC-7 during standard time), excepting Arizona - vide infra;
(5) areas[10] traces the Pacific Time Zone (UTC-8 during standard time);
(6) areas[9] frames the Alaska Time Zone (UTC-9 during standard time);
(7) areas[14] encompasses Hawaii, which observes Hawaii-Aleutian standard time (UTC-10) throughout the year;
(8) areas[8] encompasses American Samoa, which observes Samoa standard time (UTC-11) throughout the year; and
(9) areas[3] encompasses Guam and the Northern Mariana Islands, which observe Chamorro standard time (UTC+10) throughout the year.
Here's what's going on with the other seven usatimezonemap area elements:
• areas[5] traces the Arizonan sector of the Navajo Nation, which observes mountain standard time or mountain daylight time à la the rest of the Mountain Time Zone mapped by areas[11].
• areas[6] encompasses the rest of Arizona, including the Hopi Nation enclave, which observes mountain standard time throughout the year.
• areas[7] encompasses the western part of the Aleutian Islands that lies in the Hawaii-Aleutian Time Zone; unlike Hawaii, this region observes DST.
• areas[2], areas[1], and areas[4] respectively encompass the Republic of the Marshall Islands, the Federated States of Micronesia, and the Republic of Palau, independent nations that nevertheless have entered into "Compacts of Free Association" with the U.S.; these regions respectively observe UTC+12, UTC+11, and UTC+9 throughout the year.
• Curiously, the Kwajalein atoll, which is part of the Republic of the Marshall Islands and accordingly observes UTC+12 throughout the year, is given its own area, areas[0].
Shape-wise, the non-contiguous U.S. time zone regions are all circumscribed by shape="rect" (rectangular) area elements. Let's take a look at the Alaska Time Zone area, areas[9]:
<area shape="rect" coords="47,-2,101,72" onmouseover="setzone('08');" onmouseout="setzone('00');" onclick="TimeHREF(this);" href="/timezone.cgi?Alaska/d/-9" alt="Alaska Time Zone" />Let's first get a minor issue out of the way. With a top-y coords value of -2, the areas[9] area actually extends beyond the top edge of the map2.gif image, and thus the top 54px-by-2px part of the area is 'inactive', i.e., does not respond to mouseover, mouseout, and click events. But in practical terms, does it matter whether the top-y value is set to -2 or 0? No.
The onmouseover and onmouseout event handlers both call the setzone( ) function in the document head's second script element:
<script name="function def" language=JavaScript1.1><!--
function setzone(zonenum) {
document.images['zonename'].src = '/images/labels/zone-' + zonenum + '.gif'; }
//--></script><!-- In case you were wondering, name is not a valid (nor even a deprecated) attribute for the script element. -->
Directly below the map2.gif image is a zonename img placeholder for holding images specifying labels and other information for the various time zones - "Atlantic time zone - Puerto Rico & Virgin Islands, no Daylight Saving", "Eastern time zone", etc.; the zonename replacement images are themselves preloaded by the document head's third (name="preload labels") script element. The zonename placeholder is initially loaded with a transparent zone-00.gif image:
<img name="zonename" width="404" height="18" src="/images/labels/zone-00.gif" alt="Zone-00" />Mousing over a usatimezonemap area passes to the setzone( ) function a corresponding image label number (01, 02, ... 16) that is given the identifier zonenum and then concatenated with /images/labels/zone- and .gif to give the image label URL, whose assignment to the zonename src property loads the image label into the zonename placeholder. In short for our Alaska example, mousing over the Alaskan mainland sends '08'* to setzone( ), which consequently displays /images/labels/zone-08.gif
below the map2.gif image. Conversely, mousing away from a usatimezonemap area returns the zone-00.gif image to the zonename placeholder by sending '00'* to setzone( ).
*Image label numbers with a leading 0 must be stringified before they are passed to setzone( ); otherwise, JavaScript will cast off the 0 and the image label (whose src value includes the 0) will not load. Image label numbers beginning with a 1 need not be stringified.
The onclick event handler calls the TimeHREF( ) function in the document head's first (name="TimeHREF function def.") script element:
function TimeHREF(oldlink) {
if (JavaOK) { oldlink.href = oldlink.href + '/java'; }
else { oldlink.href = oldlink.href; } }The contiguous U.S. time zone regions are of course all mapped by shape="poly" (polygonal, incorrectly specified in the www.time.gov source as shape="polygon") area elements, e.g.,
<area shape="poly" coords="132,12, 130,29, 116,55, 114,74, 124,111, 140,127, 152,127, 155,116, 155,104, 161,104, 167,68, 153,64, 153,59, 148,58, 151,45, 157,46, 162,40, 169,42, 172,37, 166,28, 170,19, 142,11, 140,16" onmouseover="setzone('07');" onmouseout="setzone('00');" onclick="TimeHREF(this);" href="/timezone.cgi?Pacific/d/-8" alt="Pacific Time Zone" />maps the Pacific Time Zone.
Finally, I have sent the following email message to the timeinfo@boulder.nist.gov email contact address on the www.time.gov "About this Service" page:
Hello, NIST -There's been no response as of this writing. The movable crosshairs method of Blog Entry #124 could certainly be used to delimit usatimezonemap's rectangular regions, and maybe even its polygonal regions in a crude way but not with precision.
I have an HTML/image map question for you regarding the "usatimezonemap" map element that appears in the www.time.gov source. How did you determine the coordinates (coords values) of the area elements of this map? I would guess that you used a specialized image map-creating program to do this - if so, which one?
<map name="zonenamesb3c96c19"> ... </map>
The zonenamesb3c96c19 map (how's that for a descriptive name?) divides the zonenames.gif image into nine rectangular areas that respectively encompass the time zones listed in the image, e.g.,
<area shape="rect" coords="292,0,335,19" onclick="TimeHREF(this);" href="/timezone.cgi?Eastern/d/-5" alt="Eastern Time" />surrounds the image's "Eastern" text. Clicking a time zone takes the user to the corresponding 'Java' or 'non-Java' time page described above. Mousing over a time zone does not display a corresponding label in the zonename placeholder, however.
Vis-à-vis the usatimezonemap map, the zonenamesb3c96c19 map leaves out everything to the 'west' of (across the Date Line from) Samoa, has single areas for the Hawaii-Aleutian and Mountain Time Zones, and strangely concludes with a "UTC" area (well, "strangely" in the sense that there are no U.S. commonwealths/territories/associated states in the UTC±0 time zone region).
But you may be thinking, "Why use an image map here at all, as opposed to, more conventionally, a series of anchor elements? Better yet, why not combine the usatimezonemap and zonenamesb3c96c19 maps via reformulating the usatimezonemap map in terms of anchor elements?" OK, OK, we'll get to that, plus a trade-in of those layout tables for a style sheet, in the following entry.
reptile7
- posted by A. Peak @ 3:15 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)