Kor
10-16-2003, 11:18 AM
I have a script who capture the mouse position, transform him in relative to a certain DIV and returns the values in mobile glancing small "popups". Works OK in IE6, but gives me an error while reading in NS6, athough it not supoose to do so. The error is about the mouse position... (bold in the following code):
Any ideea?
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
xG = 250;
yG = 100;
hG = 200;
wG = 300;
hF = 20;
wF = 40;
tX = "X = "; // label X
tY = "Y = "; // label Y
function objectSetup(){
zDiv = new layerSetup("grafic",xG,yG,hG,wG,"visible");
zIcs = new layerSetup("ics",xG,yG+hG,hF,wF,"hidden");
zIgrec = new layerSetup("igrec",xG-wF,yG,hF,wF,"hidden");
}
function layerSetup(id,left,top,height,width,visibility){
if (document.getElementById){
this.obj = document.getElementById(id).style;
this.obj.left = left;
this.obj.top = top;
this.obj.height = height;
this.obj.width = width;
this.obj.visibility = visibility;
return this.obj;
} else if(document.all) {
this.obj = document.all[id].style;
this.obj.left = left;
this.obj.top = top;
this.obj.height = height;
this.obj.width = width;
this.obj.visibility = visibility;
return this.obj;
} else if(document.layers) {
this.obj = document.layers[id];
this.obj.left = left;
this.obj.top = top;
this.obj.height = height;
this.obj.width = width;
this.obj.visibility = visibility;
return this.obj;
}
}
function bla()
{
if (document.layer) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove=showMousePosition;
}
function showMousePosition(e){
var mX, mY, xDiv, yDiv, hDiv, wDiv;
xDiv = parseInt(zDiv.left);
yDiv = parseInt(zDiv.top);
hDiv = parseInt(zDiv.height);
wDiv = parseInt(zDiv.width);
if (document.layer) {
mX = e.pageX;
mY = e.pageY;
}
else {
mX = window.event.clientX;//here is the error?
mY = window.event.clientY;
XX = mX - xDiv;
YY = 0 - (mY - yDiv - hDiv);
}
//window.status = "X="+XX+" Y="+YY;
if((XX < 0) || (XX > wDiv) || (YY < 0) || (YY > hDiv)){
zIcs.visibility = "hidden";
zIgrec.visibility = "hidden";
}
else{
zIcs.visibility = "visible";
zIgrec.visibility = "visible";
document.forms[0].ics.value = tX+XX;
document.forms[0].igrec.value =tY+YY;
zIgrec.top = mY;
zIcs.left = mX;
return true;}
}
</script>
<style type="text/css">
<!--
#grafic {
background-color: #CCCCCC;
position: absolute;
border: 1px solid #000000;
}
.valori {
background-color: #FFFFCC;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
border: 1px solid #000000;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" onload="objectSetup();bla()">
<form>
<div id="grafic"></div>
<input id="ics" name="ics" type="text" class="valori">
<input id="igrec" name="igrec" type="text" class="valori">
</form>
</body>
</html>
And another thing... Is there a smarter method to put that values other than using inputs? Using createElement or something like this....
Any ideea?
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
xG = 250;
yG = 100;
hG = 200;
wG = 300;
hF = 20;
wF = 40;
tX = "X = "; // label X
tY = "Y = "; // label Y
function objectSetup(){
zDiv = new layerSetup("grafic",xG,yG,hG,wG,"visible");
zIcs = new layerSetup("ics",xG,yG+hG,hF,wF,"hidden");
zIgrec = new layerSetup("igrec",xG-wF,yG,hF,wF,"hidden");
}
function layerSetup(id,left,top,height,width,visibility){
if (document.getElementById){
this.obj = document.getElementById(id).style;
this.obj.left = left;
this.obj.top = top;
this.obj.height = height;
this.obj.width = width;
this.obj.visibility = visibility;
return this.obj;
} else if(document.all) {
this.obj = document.all[id].style;
this.obj.left = left;
this.obj.top = top;
this.obj.height = height;
this.obj.width = width;
this.obj.visibility = visibility;
return this.obj;
} else if(document.layers) {
this.obj = document.layers[id];
this.obj.left = left;
this.obj.top = top;
this.obj.height = height;
this.obj.width = width;
this.obj.visibility = visibility;
return this.obj;
}
}
function bla()
{
if (document.layer) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove=showMousePosition;
}
function showMousePosition(e){
var mX, mY, xDiv, yDiv, hDiv, wDiv;
xDiv = parseInt(zDiv.left);
yDiv = parseInt(zDiv.top);
hDiv = parseInt(zDiv.height);
wDiv = parseInt(zDiv.width);
if (document.layer) {
mX = e.pageX;
mY = e.pageY;
}
else {
mX = window.event.clientX;//here is the error?
mY = window.event.clientY;
XX = mX - xDiv;
YY = 0 - (mY - yDiv - hDiv);
}
//window.status = "X="+XX+" Y="+YY;
if((XX < 0) || (XX > wDiv) || (YY < 0) || (YY > hDiv)){
zIcs.visibility = "hidden";
zIgrec.visibility = "hidden";
}
else{
zIcs.visibility = "visible";
zIgrec.visibility = "visible";
document.forms[0].ics.value = tX+XX;
document.forms[0].igrec.value =tY+YY;
zIgrec.top = mY;
zIcs.left = mX;
return true;}
}
</script>
<style type="text/css">
<!--
#grafic {
background-color: #CCCCCC;
position: absolute;
border: 1px solid #000000;
}
.valori {
background-color: #FFFFCC;
position: absolute;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
border: 1px solid #000000;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" onload="objectSetup();bla()">
<form>
<div id="grafic"></div>
<input id="ics" name="ics" type="text" class="valori">
<input id="igrec" name="igrec" type="text" class="valori">
</form>
</body>
</html>
And another thing... Is there a smarter method to put that values other than using inputs? Using createElement or something like this....