want to text remain as it was

[bhuraasif]

Hi,

i have this script,

it is working fine,no problem at all with scripts,

function moveover()
{
document.getElementById('image').width="325"
document.getElementById('image').height="360"
}
function moveback()
{
document.getElementById('image').width="70"
document.getElementById('image').height="50"
}


<img id="image" src="img/test.jpg" border="0" height="50" width="70" onmouseover="moveover()" onmouseout="moveback()">

working fine but the problem is below this image i have some text.
when i mouse over on images i gets big. and text also moves from its original position. i want that only images must be big and text must be its place where it was.

Actually i want image bug its own position.

please help me.

waiting for reply.

[PeejAvery]

Since you are working with inline element (IMG) you will have to incorporate a totally different function to keep the rest of the HTML objects and text from moving.

The following is an example of how to put a div (with a larger image) over top of an image.
<script language="JavaScript">
function moveover(obj, img, w, h){
if(obj.offsetParent){
x = obj.offsetLeft;
y = obj.offsetTop;
while(obj = obj.offsetParent){
x += obj.offsetLeft;
y += obj.offsetTop;
}
}

document.getElementById('imgdiv').style.left = x - 128; // center position (325 - 70) / 2
document.getElementById('imgdiv').style.top = y - 155; // center position (360 - 50) / 2
document.getElementById('imgdiv').innerHTML = "<img src='" + img + "' width=" + w + " height=" + h + " border=0 onmouseout='moveback()'>";
document.getElementById('imgdiv').style.display = "block";
}
function moveback(){document.getElementById('imgdiv').style.display = "none";}
</script>

<style>img{border: 0px;}</style>

<div id="imgdiv" style="position:absolute; display:none"></div>

<img id="image" src="img/test.jpg" width=70 height=50 onmouseover="moveover(this,'img/test.jpg',325,360)">