| ION Script source code: |
<!-- This world map example 2 demonstrates two advanced topics:
1.) How to handle browser differences in JavaScript.
2.) How to use JavaScript on an ION_IMAGE to get back the position for a mouse event.-->
<ION_SCRIPT>
<ION_HEADER>
<APPLICATION>ION Script Examples</APPLICATION>
<TITLE>World Map JavaScript Example 2</TITLE>
<AUTHOR>Research Systems, Inc.</AUTHOR>
</ION_HEADER>
<ION_BODY>
Watch the browser status area as you move your mouse over the map. <br>
<br>
<ION_IMAGE WIDTH="384" HEIGHT="192" BORDER="0">
<IDL>
read_jpeg,FILEPATH(SUB=['products','ion','ion_script','examples', 'data'], 'earth.jpg'),image
image=COLOR_QUAN(TEMPORARY(image),1,r,g,b)
tvlct,r,g,b
tv, image,/ORDER
</IDL>
</ION_IMAGE>
<br>
<br>
Notice that the latitude and longitude are reported in the browser status area.
<SCRIPT LANGUAGE="JavaScript">
<!--// Figure out whether this is Navigator or IE.
var isNS4 = (document.layers) ? true : false;
var isNS6 = (!document.all && document.getElementById) ? true : false;
var isIE = (document.all && document.getElementById) ? true : false;
// This event handler displays mouse position in the browser
// status area. It has vendor-dependent sections to deal
// with the differences in the Event object.
function handler(e) {
// If we're in Navigator4, estimate the mouse position
if (isNS4) {
if (e.x || e.y) {
status="Lon: " + Math.round(360*(e.pageX-8)/383-180) + " Lat: " + Math.round(180*(191-e.pageY+141)/191-90);
}
}
// If we're in Navigator 6, report mouse position in this way:
if (isNS6) {
status="Lon: " + Math.round(360*(e.clientX - e.target.offsetLeft)/383-180) + " Lat: " + Math.round(180*(191 - (e.clientY - e.target.offsetTop))/191-90);
}
// If we're in Internet Explorer, report mouse position in this way:
if (isIE) {
e = window.event; // Grab the event.
status="Lon: " + Math.round(360*(e.offsetX)/383-180) + " Lat: " + Math.round(180*(191-e.offsetY)/191-90);
e.cancelBubble = true;
}
}
// This function registers the event handler for the IMG object:
function addhandlers(o) {
if (o.addEventListener) { // DOM Level 2 Event Model
// Register capturing event handlers
o.addEventListener("mousedown", handler, true);
o.addEventListener("mousemove", handler, 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", handler);
o.attachEvent("onmousemove", handler);
}
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 = handler;
o.onmousemove = handler;
}
}
addhandlers(document.images[0]);
//-->
</SCRIPT>
</ION_BODY>
</ION_SCRIPT>
Unauthorized reproduction prohibited. -->