Big picture does not display properly under firefox and chrome

<div class="footer">
             <img src="mypicture.jpg"  width="40" height="40" onmouseover="ShowFloatingImage(this, 150, 150);" />
</div>

<script>

function GetAbsPosition(obj)
{
var curleft = 0, curtop = 0;
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
return [curleft,curtop];
}

function ShowFloatingImage(image, width, height)
{
var id = "trailimageid";
var newdiv = document.getElementById(id);
if(newdiv == null)
{
newdiv = document.createElement('div');
newdiv.setAttribute('id',id);
newdiv.setAttribute('onmouseout', "HideElement('"+id+"');");
document.body.appendChild(newdiv);
}
newdiv.innerHTML = '<img src='+image.src+ ' width='+(image.width + width) + ' height=' + (image.height + height) + ' />';

var absPos = GetAbsPosition(image);
newdiv.style.position = "absolute";
newdiv.style.posLeft = absPos[0] - width;
newdiv.style.posTop = absPos[1] - height;
newdiv.style.display="block";
}

function HideElement(id)
{
var elem = document.getElementById(id);
elem.style.display="none";
}

</script>

Code (JavaScript):

how to let the code run properly under chrome, and firefox as ie, pls?

 

posLeft and posTop... ?

 

Hi.

Try to replace

newdiv.style.posLeft = absPos[0] - width;
newdiv.style.posTop = absPos[1] - height;

Code (JavaScript):

with

newdiv.style.left = absPos[0] - width;
newdiv.style.top = absPos[1] - height;

Code (JavaScript):

 

You could also try converting to jQuery which should normalize it for you.

$('.class').left(amt);

Code (markup):

, etc.