Friday, April 03, 2009
Land, Wars, and Pixels
Blog Entry #141
We return now to our reengineering of the www.time.gov source. The use of a separate zonenamesb3c96c19 image map to create a set of not-so-matching links for the main usatimezonemap image map seems downright...weird to me - I can't figure out why the www.time.gov coder(s) did that. Given the W3C's recommendation that map elements be stocked with anchor elements rather than area elements, it would make much more sense to merge the usatimezonemap and zonenamesb3c96c19 maps via converting usatimezonemap's area elements to anchor elements, and we'll do that in today's post.
As noted in Blog Entry #138, the usatimezonemap and zonenamesb3c96c19 maps have overlapping but somewhat different scopes; specifically, the zonenamesb3c96c19 map leaves out the following regions that are covered by the usatimezonemap map:
(1) Palau (5) Marshall/Wake Islands (2) Guam/Northern Mariana Islands (6) Western Aleutian Islands (3) Federated States of Micronesia (7) Non-DST Arizona (4) KwajaleinOur new-and-improved usatimezonemap map will include these regions. (Had it been my job to design the www.time.gov page from scratch, I probably would have left out the across-the-Date Line regions, but because they are already present in the map2.gif image, let's go with what we have, shall we?)
Notwithstanding my above use of the word "merge", we will in practice first throw out the img5 (name="timezonename" in the original source) img placeholder and its associated zonenamesb3c96c19 map altogether, replacing them with an anchor-element-based usatimezonemap map. We will wrap the usatimezonemap anchor elements in a div1 div element (rather than in a p element, which would insert unwanted empty line boxes above and below the anchor elements) - recall from Blog Entry #121 that a map element cannot have anchor element children - and then separate the anchor elements from each other with pipe (|) characters à la the W3C's client-side image map examples:
...
<img id="img4" src="/images/labels/zone-00.gif" alt="Zone-00" />
<map id="usatimezonemap">
<!-- We noted in Blog Entry #121 that XHTML 1.0 deprecates the name attribute of the map element. -->
<div id="div1">
anchor1 | anchor2 | anchor3 | etc.
</div></map>
<a href="exhibits.html"><img id="img6" src="/images/timeex.gif" alt="Time exhibits" /></a>
...We implied earlier that all of the original usatimezonemap regions would be brought into the new usatimezonemap map; however, two of those regions are ripe for folding into adjoining regions:
(1) Kwajalein and (2) the Navajo part of Arizona.
In the discussion below, I will use document.links[i] expressions to reference specific usatimezonemap area elements.
Kwajalein
The Kwajalein atoll is part of the Republic of the Marshall Islands (RMI) and observes UTC+12 all year round, with no DST period, like the rest of the RMI. Just to the east of usatimezonemap's rectangular document.links[0] Kwajalein area is its rectangular document.links[2] "Marshall Islands & Wake Island" area (FYI, Wake Island is a U.S. territory to which the RMI lays claim). Do we really need separate Kwajalein and Marshall Islands regions? Needless to say, we do not. We can easily incorporate Kwajalein into the Marshall Islands region by assigning the Kwajalein region's left-x coords value, 71, to that of the Marshall Islands region:
Kwajalein:
coords="71,142,88,163"Marshall Islands & Wake Island:
coords="85,142,108,169"Kwajalein + Marshall Islands & Wake Island:
coords="71,142,108,169"The Marshall Islands region's onmouseover label, "Marshall Islands & Wake Island, no Daylight Saving", is equally suitable for Kwajalein and can be left alone.
Navajo Arizona
(The Arizona areas are definitely the most confusing part of the usatimezonemap map; it was necessary for me to get out some graph paper and plot the coordinates of these areas myself to see what was going on.)
Arizona lies within the Mountain Time Zone, but most of Arizona (the brownish area in this map) does not observe DST; the Navajo Nation sector in Arizona's northeastern corner does observe DST, however. Mountain Time is mapped by three polygonal areas in the original usatimezonemap map:
(1) document.links[5] outlines the Navajo part of Arizona;
(2) document.links[6] traces the rest of Arizona; and
(3) document.links[11] covers the rest of the Mountain Time Zone.
document.links[5] and document.links[11] have the same onmouseover label, "Mountain time zone", whereas document.links[6]'s onmouseover label reads "Mountain time zone - Arizona, non-Navajo, no Daylight Saving".
The document.links[5] Navajo area defines a 14-vertex polygon that 'folds upon itself' so that two opposite edges coincide, giving in effect two connected, not-quite-concentric polygons:
The document.links[5] coordinates are:
coords="171,109, 174,103, 185,105, 184,117, 174,116, 174,111, 176,111, 176,113, 179,115, 182,111, 179,108, 176,110, 176,111, 174,111"The coordinates for vertices 6 and 14 are identical (174,111) - ditto for vertices 7 and 13 (176,111). Vertices 1-6 delimit an outer Navajo Nation region. Vertices 7-12 delimit an inner Hopi Nation region, which is actually external to the area circumscribed by document.links[5].
The coordinates for the main document.links[6] Arizona area are:
coords="152,128, 171,140, 180,141, 183,117, 179,116, 179,115, 182,111, 179,108, 176,110, 176,113, 179,115, 179,116, 174,116, 174,111, 171,109, 174,103, 162,101, 161,104, 155,104, 155,116"
<!-- The brown coordinates delimit the Hopi Nation region. -->The document.links[6] area includes the Hopi Nation 'pentagon' but excludes the Navajo Nation region (it could have included both regions because it follows document.links[5] in the source):
The main document.links[11] Mountain Time area skirts Arizona altogether, including neither the Navajo Nation region nor the Hopi Nation region.
document.links[6]'s exclusion of the Navajo Nation region gives us the green light to bring the document.links[5] area into the document.links[11] area. There are a couple of ways to do this:
(1) The document.links[11] coordinates are:
coords="170,19, 221,29, 222,38, 227,35, 234,39, 234,67, 227,79, 227,105, 225,109, 218,108, 217,142, 206,142, 206,155, 195,141, 185,144, 180,141, 185,105, 162,101, 167,68, 153,64, 153,59, 148,58, 151,45, 157,46, 162,40, 169,42, 172,37, 166,28"In order, document.links[11] hits the southeastern corner of Arizona at 180,141, the northeastern corner of Arizona at 185,105, and the not-quite-the-northwestern corner (actually the northernmost point, bordering Nevada and Utah) of Arizona at 162,101. Incorporating document.links[5] into document.links[11] is a simple matter of replacing the 185,105 document.links[11] vertex with the 184,117, 174,116, 174,111, 171,109, 174,103 clockwise sequence of document.links[5] vertices that run along the southern and western 'borders' of the Arizona Navajo region, i.e., vertices 4, 5, 6/14, 1, and 2 in the Navajo area graphic above, respectively.
(2) Alternatively, as long as the main Arizona region precedes the main Mountain Time region in the source, we can bring all of Arizona into document.links[11] by replacing the 185,105 document.links[11] vertex with the 171,140, 152,128, 155,116, 155,104, 161,104 clockwise sequence of document.links[6] vertices that run along Arizona's southern and western borders.
There is one slight drawback to getting rid of a separate document.links[5]: 1-2 pixels' worth of the Navajo Nation region will now be part of the no-DST main Arizona region. But I can live with it.
Most of the rest of the usatimezonemap area attribute data - specifically, the area shape, coords, onmouseover, onmouseout, onclick, and href assignments - can be transplanted as-is into corresponding anchor elements; however, the area alt attributes are not valid for anchor elements and should be left out. The area elements don't have to be thrown out but can remain in the map element - they can be either inside or outside div1* - to accommodate browsers that won't apply the anchor element data to the map2.gif image; Safari is one such browser, I'm sorry to report.
*For XHTML-compliance, put the area elements inside div1. As noted in Blog Entry #123, the XHTML map element content models do not allow mixing block-level element children and area element children.
OK, time for a demo:
As noted parenthetically at the beginning of Blog Entry #138, the original usatimezonemap and zonenamesb3c96c19 maps are now gone. The demo's onmouseover and onmouseout effects should work for you but clicking the map's a/area links will take you to "404 Not Found" pages (the Time exhibits, About this service, and PRIVACY POLICY & SECURITY NOTICE links below the map are live as of this writing).
I've placed the demo's usatimezonemap regions in a strictly west-to-east order as in the original zonenamesb3c96c19 map (but not in the original usatimezonemap map). The Arizona anchor must precede the Mountain anchor (vide supra) but otherwise the remaining anchors can be reordered without affecting their effects on the map2.gif image; you might prefer to list the contiguous U.S. time zones first, for example.
Vis-à-vis the style rules given in the previous post, the div0 and starstripe.jpg heights have been increased to 440px and 438px, respectively, to accommodate three line boxes' worth of anchor text (which is what you get if the body element's font-size is set to 16px).
The div1 style rule set is:
#div1 { width: 425px; text-align: center; position: relative; left: 23px; top: 40px; }
div1's positioning is the same as was that for the img5 placeholder it replaces; its width is a bit larger than was img5's width (413px) and its anchor text is centered.
The anchor text is colored by the a:link, a:visited, and a:active style rules that I gave you at the end of the previous post. Moreover, I've given the body element a color:yellow; style to highlight the | characters that separate the div1 anchors (black separators don't show up very well on a #00695e background).
Finally, I've ditched the zonenamesb3c96c19 "UTC" link - put it back if you like.I've changed my mind - I think we should talk about that JavaOK code at the beginning of the first www.time.gov script element. And what does happen if we replace map2.gif's img3 placeholder with an object element? We'll wrap up our www.time.gov discussion by addressing these concerns in the next post.
reptile7
- posted by A. Peak @ 2:56 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)