<ION_SCRIPT>
<ION_HEADER>
<TITLE>NYC Locator </TITLE>
<SCRIPT LANGUAGE="JavaScript">
// global variables
var ewin = 0; // the window to place the location
var isNS4 = 0; // boolean: non-zero if browser is Netscape 4
var isNS6 = 0; // boolean: non-zero if browser is Netscape 6
var isIE5 = 0; // boolean: non-zero if browser is IE5+
// Given an object, add the locationHandler to the mousedown event
function addhandler(o) {
if (o.addEventListener) { // DOM Level 2 Event Model
// Register capturing event handlers
o.addEventListener("mousedown", locationHandler, true);
}
else if (document.attachEvent) { // IE 5+ Event Model
// In the IE Event model, we can't capture events, so these handlers
// are triggered when only if the event bubbles up to them.
// This assumes that there aren't any intervening elements that
// handle the events and stop them from bubbling.
o.attachEvent("onmousedown", locationHandler);
}
else { // IE4/Netscape 4 Event Model
// In IE 4 we can't use attachEvent(), so assign the event handlers
// directly after storing any previously assigned handlers so they
// can be restored. Note that this also relies on event bubbling.
o.onmousedown = locationHandler;
}
}
// initialize the application
function initNYC() {
// Create a new window for our event handler to display event details in.
ewin = window.open("", "NYC_Locator", "width=350,height=50,resizable");
// Figure out whether this is Navigator or IE. Assume version 4.
isNS4 = (document.layers) ? true : false;
isIE5 = (document.all && document.getElementById) ? true : false;
isNS6 = (!document.all && document.getElementById) ? true : false;
// Add a handler to image #0, which should be the only one
addhandler(document.images[0]);
}
// cleanup the application
function cleanupNYC() {
// Delete the window if it exists
if (!ewin.closed)
ewin.close();
}
// A simple 'GIS' system. Based on our known image of NYC, we have
// (roughly) mapped the pixel location to a geographic region.
function getLocation(x, y) {
if ((x >= 193) && (y <= 153)) {
loc = "Queens";
}
else if ( ((x >= 137) && (y >= 153) ) ||
((x >= 99 ) && (y >= 233) ) ) {
loc = "Brooklyn";
}
else if ( ((x >= 89) && (x <= 170) && (y <= 149)) ||
((x >= 89) && (x <= 122) && (y >= 149) && (y <= 177)) ) {
loc = "Manhattan";
}
else if ( ((x <= 57) && (y <= 177)) ||
((x <= 42) && (y >= 177) && (y <= 214)) ) {
loc = "New Jersey";
}
else if ((x >= 89) && (x <= 113) && (y >= 205) && (y <= 231)) {
loc = "Governors Island";
}
else {
loc = "The Hudson River";
}
return loc;
}
// The event handler
function locationHandler(e) {
// check if our window has been killed
if (ewin.closed)
return;
var d = ewin.document; // Shorthand for document
d.open("text/html"); // open document as html text
// If we're in Navigator, get the X and Y location of the event
//
// If we're in Internet Explorer, first copy the event from the
// global event variable, then get its x and y values. Finally, set
// the cancelBubble property so it doesn't bubble and get reported
// multiple times.
if (isNS4) {
// Navigator does not have an explicit way to get the (x,y) relative
// to the image so we'll estimate it
x = e.x - 9;
y = e.y - 92;
} else if (isNS6) {
// Netscape 6 supports HTMLElement.offset*, so we can get the exact location
x = e.clientX - e.target.offsetLeft;
y = e.clientY - e.target.offsetTop;
} else if (isIE5) {
e = window.event; // Grab the event.
// in IE, Event.offsetX,Y are the relative positions within the image
x = e.offsetX;
y = e.offsetY;
e.cancelBubble = true;
}
// translate the (x,y) point to a location name
loc = getLocation(x,y)
// output the information
d.writeln("<H1>" + loc + "</H1>");
d.writeln(" (" + x + " , " + y + ")");
d.close();
}
</SCRIPT>
</ION_HEADER>
<ION_BODY ONUNLOAD="cleanupNYC()">
<ION_IMAGE LABEL="New York City" TYPE="DIRECT" WIDTH="320" HEIGHT="256" ONLOAD="initNYC()">
<IDL>
image_large
</IDL>
</ION_IMAGE>
<H3>Click a location in the map</h3>
</ION_BODY>
</ION_SCRIPT>
Unauthorized reproduction prohibited. -->