JavaScript code not working on IE...

[rsbgm]

Hi all,

This code works on FF and Chrome but not on IE. It suppose to popup a larger image when a mouse scrolls over the thumbnail. The popup will move with the mouse while it hovers over the thumbnail. The popup wont even show in IE. Please advise what to do.

I believe the problem lies at the updatePos function where the clientX and clientY for mouse position is used. I'm not sure but the script kinda stops there at IE. If so, I really don't know what to do or put to compensate for bugs or whatever IE has. I need a work around or the like. Please help.

// set the object variable (drop down menu div, tool tip div, img tool tip div, etc..)
var theObj = 0;

var theKey			= 0;			// the object initiating script theObj
var objType			= 0;			// type of object display: 0 for drop down menu, 1 for tool tip
var timeout1		= 10;			// time delay for the hidden object to pop out
var timeout2		= 10;			// time delay for the object to hide again
var opentimer		= 0;			// set variable for window object timeout
var closetimer		= 0;			// set variable for window object timeout

// show theObj
function showObj(objID) {
	theKey = this;
	// cancel close timeout if from another theKey
	cancelclosetime();
	// get div element by id
	if (typeof objID == "string") {
		objID = document.getElementById(objID);
		//if (theObj) theObj.style.visibility = 'visible'; =============== WORKING
	}
	// close any other theObj open usually from another theKey
	if (theObj && theObj != objID) theObj.style.visibility = 'hidden';
	// get the ID and show theObj using time delay
	theObj = objID;
	opentimer = window.setTimeout(opentime, timeout1);
}

// move theObj near mouse before showing via updatePos
function opentime() {
	theKey.onmousemove = updatePos;
	window.onscroll = updatePos;
}

function updatePos(e) {
	// get event
	var evt = e || window.event;
		
	//var ev=arguments[0]?arguments[0]:event;
	// x & y coordinates of the mouse
	var x = evt.clientX;
	var y = evt.clientY;
		
	// x & y offset of top left corder of theObj
	var diffX=35;
	var diffY=250;
	
	// get current width of the browser
	var de = document.documentElement;
	var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
	
	// get theObj width
	var objw = theObj.offsetWidth;
	// get minimum area at rigth before theObj goes beyond the right border of browser
	var hasArea = w - objw;
	// compensate for diffX
	var x2 = x+30;
	
	// check if area before right border of browser is still larger than theObj, if not, place theObj at left side of mouse
	if (hasArea > x2) {
		theObj.style.left = x-2+diffX+document.body.scrollLeft+"px";
		theObj.style.top = y-2-diffY+document.body.scrollTop+"px";
	} else {
		theObj.style.left = x-2-diffX-objw-document.body.scrollLeft+"px";
		theObj.style.top = y-2-diffY+document.body.scrollTop+"px";
	}
	
	// show the Obj
	if (theObj) theObj.style.visibility = 'visible';
	// theObj.onmouseout=hideMe; -- this is just part of the original code
}

// hiding theObj
function close() {
	if (theObj) theObj.style.visibility = 'hidden';
	// reset var
	theObj = 0;
}

// delay in closing theObj
function closetime() {
	closetimer = window.setTimeout(close, timeout2);
}

// cancel close timer (this is when mouse hovers out of theKey on to theObj
// applicable for drop down menus
// doesn't work on tool tip
function cancelclosetime() {
	if (closetimer) {
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

// close theObj when click-out
document.onclick = close;