Forum Moderators: open
I have this javascript that let's the user see the latitude and longitude when they move the mouse over an image. The problem is that this only works in explorer and not netscape or mozilla. I was wondering if anyone could give me any help on getting this to work on netscape and or firefox too. You can see it in action here:
[bsrsi.msu.edu...]
And this is the javascript:
function SubmitForm() {
document.forms[1].elements["imagex"].value = nowX;
document.forms[1].elements["imagey"].value = nowY;
document.forms[1].submit();
}
function DoHocusPocus() {
deltaXgeo = Math.abs(lowerRightXgeo - upperLeftXgeo);
deltaYgeo = Math.abs(lowerRightYgeo - upperLeftYgeo);
pctX = nowX / ImgX;
pctY = nowY / ImgY;
offsetXgeo = deltaXgeo * pctX;
offsetYgeo = deltaYgeo * pctY;
NewXgeo = upperLeftXgeo + offsetXgeo;
NewYgeo = upperLeftYgeo - offsetYgeo;
NewXshortgeo = ( Math.round( NewXgeo * 1000000)) / 1000000;
NewYshortgeo = ( Math.round( NewYgeo * 1000000)) / 1000000;
document.forms[0].elements[1].value = NewXshortgeo;
document.forms[0].elements[0].value = NewYshortgeo;deltaXutm = Math.abs(lowerRightXutm - upperLeftXutm);
deltaYutm = Math.abs(lowerRightYutm - upperLeftYutm);
offsetXutm = deltaXutm * pctX;
offsetYutm = deltaYutm * pctY;
NewXutm = upperLeftXutm + offsetXutm;
NewYutm = upperLeftYutm - offsetYutm;
NewXshortutm = Math.round( NewXutm );
NewYshortutm = Math.round( NewYutm );
document.forms[0].elements[3].value = NewXshortutm;
document.forms[0].elements[2].value = NewYshortutm;
}
function DispCoords(eventType) {
xVal = parseInt(window.event.x);
yVal = parseInt(window.event.y);
layerArray = document.all.item("ImgLayer");
imgLayer = document.all.item("ImgLayer").style;
ImgX = document.images[0].width;
ImgY = document.images[0].height;
with (document.forms[0]) {
if ( xVal > parseInt(imgLayer.left) && yVal > parseInt(imgLayer.top) ) {
if ( xVal <= (parseInt(imgLayer.left) + ImgX) && yVal <= (parseInt(imgLayer.top) + ImgY)) {
nowX = xVal - parseInt(imgLayer.left);
nowY = yVal - parseInt(imgLayer.top);
DoHocusPocus();
}
}
}
}
function DoIt() {
upperLeftXgeo = arguments[0];
upperLeftYgeo = arguments[1];
lowerRightXgeo = arguments[2];
lowerRightYgeo = arguments[3];
upperLeftXutm = arguments[4];
upperLeftYutm = arguments[5];
lowerRightXutm = arguments[6];
lowerRightYutm = arguments[7];
document.onmousemove = DispCoords;
}
And here is where the html calls upon the javascript:
if($got_coords) {
if ($width < 300) { $layerorigin = 200; }
elsif ($width < 550) { $layerorigin = 100; }
else { $layerorigin = 10; }
if($clientware =~ m/msie/) { $layerorigin -= 15; }
$coo_string = "${ULX2_geo},${ULY2_geo},${LRX2_geo},${LRY2_geo},${ULX2_utm},${ULY2_utm},${LRX2_utm},${LRY2_utm}";
print <<"__INSERTIMAGE__";
<DIV ID="ImgLayer" STYLE="left:${layerorigin}; top:${imagetop};">
<A HREF="javascript:SubmitForm();" onMouseOver="DoIt(${coo_string});">
<IMG ALT="" WIDTH=$width HEIGHT=$height src="/tmssb/${imgnum}.jpg" BORDER=0></A>
</DIV>__INSERTIMAGE__
}
else {
print "<P><input WIDTH=$width HEIGHT=$height type=image name=image src=\"/tmssb/${imgnum}.jpg\" BORDER=0><BR>\n";
}
}
ANY help would be appreciated! Also any websites that you can point me to that can help me would be great. I tried looking this up...but I don't have much experience with java, so I am clueless as to where to start. THANK YOU.
At the very least, you have used an IE-only object reference that could be reworked for all modern browsers:
layerArray = document.all.item("ImgLayer");should be changed to:
layerArray = document.getElementById("ImgLayer");The next line may not be required, as getElementById() includes all of the attributes of the named object.
See Mozilla's DOM reference [mozilla.org] for more info. I know there are others in these forums who will know better and who are bound to jump in here, too.
BTW, remember that the scripting language "javascript" is completely different from the "java" programming language. ;)
Having said that..
scripting language "javascript" is completely different from the "java" programming language.
I disagree. Both languages feature extensive use of curly brackets.
haha
