I'm taking two JavaScript / DHTML scripts and trying to integrate two into one (this and this). More specially, I'm trying to display the former inside the latter one. It kind of works. I say kind of because, when the cursor goes out of an object created using the former script, IE(6) kind of shakes(?) the entire screen (inside the browser) a little bit; this doesn't happen in Firefox. I'm guessing that there is a JavaScript / DHTML mouse events conflict (?) in IE(6), but I don't know exactly what. The former (DOM Panels III) uses the following script: /* ====================================================================================== ===== DOM Panels III ===== script by Gerard Ferrandez - ge1doot - April 22, 2007 Evolved from Phil Richard's Panels II: http://www.mgifos.demon.co.uk/panels2.htm http://www.dhteumeuleu.com ====================================================================================== */ var xm = 0; var ym = 0; document.onmousemove = function(e){ if (window.event) e=window.event; xm = e.clientX; ym = e.clientY; } var panel = { speed : .006, t : 0, O : [], over : false, run : function() { panel.t += panel.speed; for (var i = 0, o; o = panel.O[i]; i++) o.anim(i + panel.t); }, init : function(){ for (var i = 0, o; o = document.images[i]; i++){ if (o.className.indexOf('panel') >= 0) { if(o.parentNode.href != undefined) { var div = document.createElement("a"); div.href = o.parentNode.href; } else { var div = document.createElement("div"); } div.className = 'panel'; var img = document.createElement("img"); img.src = o.src; img.className = 'imgPanel'; o.parentNode.replaceChild(div,o); div.appendChild(img); div.ims = img.style; div.iw = img.width; div.ih = img.height; div.cx = -div.iw / 2; div.cy = -div.ih / 2; div.anim = function(t) { nw = this.offsetWidth; nh = this.offsetHeight; if (panel.over == this){ for (var nx = 0, ny = 0, o = this; o != null; o = o.offsetParent) nx += o.offsetLeft, ny += o.offsetTop; var x = Math.max(-this.iw + nw, Math.min(0, (-(xm - nx) * (this.iw - nw)) / nw)); var y = Math.max(-this.ih + nh, Math.min(0, (-(ym - ny) * (this.ih - nh)) / nh)); if (Math.abs(xm-nx-nw * .5) > nw || Math.abs(ym-ny-nh * .5) > nw ) panel.over = false; } else { var mx = (this.iw - nw) * .5; var my = (this.ih - nh) * .5; var x = -mx * (1 + Math.cos(t * 1.2)); var y = -my * (1 + Math.sin(t)); } this.cx += (x - this.cx) * .1; this.cy += (y - this.cy) * .1; this.ims.left = Math.round(this.cx) + 'px'; this.ims.top = Math.round(this.cy) + 'px'; } div.onmouseover = function() { panel.over = this; } this.O.push(div); } } setInterval(panel.run, 32); } } function startIt() { panel.init(); } Code (markup): And the latter (3D parallax navigator) uses the following script: // ================================================== // ===== 3D parallax navigator ==== // script written by Gerard Ferrandez - January 2007 // http://www.dhteumeuleu.com // ================================================== var prx = { cx : 0, cy : 0, X : 0, Y : 0, CX : 0, CY : 0, FO : 6, // focal RS : .05, // speed RC : 1, /* ==== mouse move event ==== */ mousemove : function (e) { if (window.event) e = window.event; prx.xm = (e.x || e.clientX) - prx.nx + (prx.nw * .5); prx.ym = (e.y || e.clientY) - prx.ny + (prx.nh * .5); }, /* ==== window resize event ==== */ resize : function () { prx.nx = pxLeft(prx.scr); prx.ny = pxTop(prx.scr); prx.nw = prx.scr.offsetWidth; prx.nh = prx.scr.offsetHeight; }, /* ==== main loop ==== */ run : function () { /* ==== mouse soften ==== */ prx.cx += (prx.xm - prx.cx) * (prx.RS * 2 * prx.RC); prx.cy += (prx.ym - prx.cy) * (prx.RS * 2 * prx.RC); /* ==== goto soften ==== */ prx.CX += (prx.X - prx.CX) * (prx.RS * prx.RC); prx.CY += (prx.Y - prx.CY) * (prx.RS * prx.RC); /* ==== prx move ==== */ for (var i = 0; i < prx.N; i++) { var o = prx.spa[i]; o.style.left = px(o.m + prx.nw * .5 + (o.X - prx.cx * .5 - prx.CX) * o.d); o.style.top = px(o.m + prx.nh * .5 + (o.Y - prx.cy * .5 - prx.CY) * o.d); } setTimeout(prx.run, 16); }, /* ==== init script ==== */ init : function (container) { this.scr = id(container); this.ref = {}; this.spa = []; var k = 0; var r = this.scr.childNodes; for (var i = 0, n = r.length; i < n; i++) { /* ==== for each group ==== */ var o = r[i]; if (o.id) { /* ==== save coordinates ==== */ var X = o.offsetLeft; var Y = o.offsetTop; this.ref[o.id] = {}; this.ref[o.id].X = X; this.ref[o.id].Y = Y; this.ref[o.id].W = o.offsetWidth; this.ref[o.id].H = o.offsetHeight; o.style.position = 'static'; var c = o.getElementsByTagName('*'); for (var j = 0, m = c.length; j < m; j++) { /* ==== for each parallax object [class="prx"] ==== */ if (c[j].className.indexOf('prx') >= 0) { var s = this.spa[k] = c[j]; /* ==== zIndex = parallax level ==== */ s.Z = s.style.zIndex; s.d = Math.min(prx.FO, prx.FO / (prx.FO + 1 - s.Z)); /* ==== x,y coordinates - group + local ==== */ s.X = X + s.offsetLeft; s.Y = Y + s.offsetTop; /* ==== zoom factor (% sizes only) ==== */ s.W = s.offsetWidth * ((!s.style.width || s.style.width.indexOf('px') > 0) ? 1 : s.d); s.H = s.offsetHeight * ((!s.style.height || s.style.width.indexOf('px') > 0) ? 1 : s.d); s.style.width = px(s.W); s.style.height = px(s.H); /* ==== buttons/links ==== */ if(s.onclick) { s.style.cursor = 'pointer'; s.style.zIndex = 100; s.onmouseover = function() { this.m = 2; prx.RC = .5; } s.onmouseout = function() { this.m = 0; prx.RC = 1; } } /* ==== navigation functions ==== */ s.goto = function (o, ret) { prx.RC = 1; if (!ret) id(o).O = this.oid; id(o).style.visibility = 'visible'; prx.X = prx.ref[o].X - .5 * (prx.nw - prx.ref[o].W); prx.Y = prx.ref[o].Y - .5 * (prx.nh - prx.ref[o].H); } s.ret = function () { this.goto(this.p.O, true); } s.hide = function () { setTimeout('id("' + this.oid + '").style.visibility = "hidden";', 500); } s.oid = o.id; s.p = o; s.m = 0; k++; } } } } this.N = this.spa.length; /* ==== resize & mouse events ==== */ addEvent(window, 'resize', this.resize); addEvent(window.document, 'mousemove', this.mousemove); /* ==== start ==== */ this.resize(); this.xm = this.nw; this.ym = this.nh; this.scr.style.visibility = 'visible'; this.run(); } } function startPage() { /* ==== init ==== */ setTimeout("prx.init('screen')", 500); } Code (markup): What could be causing this problem ...??? Also how can I solve this problem? I'd like to solve this problem itself ideally, but applying a workaround is ok, too, for the time being. I'd greatly appreciate any help ... Thanks in advance.