Javascript MouseMove event, another cross-browser mess.

**Minaki** · 10-06-2004, 09:42 AM

Hi,

I have this code which is attached to a simple DIV element (with no CSS Styles or anything)

Code:

<div id="divImage">
<img src="" alt="Map" name="imgMap" id="imgMap" />
</div>

Code:

function MapMouseMove(e) {
	if (isIE) {
	 OffsetX = window.event.offsetX;
	 OffsetY = window.event.offsetY;
	} else {
	 OffsetX = e.pageX - document.getElementById("divImage").offsetLeft; 
	 OffsetY = e.pageY - document.getElementById("divImage").offsetTop;	
	}
	GetXY(OffsetX, OffsetY);
	if ((MouseX != -1) && (MouseY != -1) && (ShowCoords == true))
	 document.getElementById("txtCoords").value = Math.round(MouseX / 1000) + 'N, ' + Math.round(MouseY / 1000) + 'E';
	else
	 document.getElementById("txtCoords").value = '';
   }

Works fine in IE, however in FireFox, document.getElementById("divImage").offsetLeft and offsetTop are always 2, and not the respective distances of the Div from the top left of the page. This script worked OK in another layout using tables, etc, however I have needed to change the layout.

What I want is for OffsetX and OffsetY to be equal to where the mouse is over the image. Is there any alternate method I can use?