Transparent window (div) is not bounding mouse position and isjumping around in IE.

[Terry]

Hi again folks,

After getting my page (http://theamazing.onlinewebshop.net/spotlight/)
to work in Firefox and Safari.

I thought I would try to get in working in IE.

My attempt is here: http://theamazing.onlinewebshop.net/light/

Unfortunately, the transparent window is not enclosing the mouse
position when the mouse is over the image.
Also, the transparent window is jumping around.

Can anyone help me?

Thanks,
Terry

 

[Terry]

Hi again folks,

After getting my page (http://theamazing.onlinewebshop.net/spotlight/)
to work in Firefox and Safari.

I thought I would try to get in working in IE.

My attempt is here:http://theamazing.onlinewebshop.net/light/

I got it working now, it turns out that I was calculating the position
of the mouse incorrectly for IE.

http://theamazing.onlinewebshop.net/light/

Terry

 

[Thomas 'PointedEars' Lahn]

I got it working now, it turns out that I was calculating the position
of the mouse incorrectly for IE.

http://theamazing.onlinewebshop.net/light/

I recommend you improve your overall programming style. For example, why

var imageL = imageT = imageB = imageR = 0;

but

var l = null;
var t = null;
var trans = null;
var r = null;
var rest = null;

(the latter form is the correct one, of course, as anything but `imageL' was
_not_ declared)?

Why not

var large = document.getElementById("large");
large.style.left = -(shiftleft * 4) + 'px';
large.style.top = -(shifttop * 4) + 'px';

and

var inside = document.getElementById("inside");
inside.style.borderLeftWidth = lborder + 'px';
inside.style.borderRightWidth = rborder + 'px';
inside.style.borderTopWidth = tborder + 'px';
inside.style.borderBottomWidth = bborder + 'px';
inside.style.visibility = 'visible';
document.getElementById("light").style.visibility = 'visible';

instead of the far less efficient and much harder to maintain

document.getElementById("large").style.left = -(shiftleft*4) + 'px';
document.getElementById("large").style.top = -(shifttop*4) + 'px';

and

document.getElementById("inside").style.borderLeftWidth = lborder + 'px';
document.getElementById("inside").style.borderRightWidth = rborder + 'px';
document.getElementById("inside").style.borderTopWidth = tborder + 'px';
document.getElementById("inside").style.borderBottomWidth = bborder + 'px';
document.getElementById("inside").style.visibility = 'visible';
document.getElementById("light").style.visibility = 'visible';

(the missing runtime feature tests aside)? Why not

if (!e) e = window.event;
if (!e)
{
// ...
}

instead of

var evt = e || window.event;
// no feature test here

?

That said, why not

<div id="opaque" ...
onmousemove="if (typeof event != "undefined") theMousemove(event);"
onmouseout="if (typeof event != "undefined") theMouseoutl(event);">

which AFAIK removes the need for a the aforementioned test instead of the
less efficient and more error-prone

document.getElementById("opaque").onmousemove = theMousemove;
document.getElementById("opaque").onmouseout = theMouseoutl;

? Why

if (obj.offsetParent) {
while (obj.offsetParent) {
// ...
}
}

where

while (obj.offsetParent)
{
// ...
}

would have sufficed? And I could go on.


HTH

PointedEars