I have been playing around with this code to get the image to enlarge when hovered over, starting in the top left of the box but this is now a problem with the image going off the screen, so wish to have it show so the two top right hand corners are together not the top left ones, and then the image enlarges left down wards so it is still in view.

what needs changing in my code to do this please.


Code:
imgPrArr=new Array()
	function imgPreload(imgP){imgPrArrT=(imgP+",").split(",");for (i in imgPrArrT){if (imgPrArrT[i]!=""){imgPrArr[imgPrArrT[i]]=new Image();imgPrArr[imgPrArrT[i]].src=imgPrArrT[i]}}}
	imgPreload("images/i1_2.gif,images/i2_2.gif,images/i3_2.gif")

	ns4=(navigator.appName.indexOf("Netscape")>=0 && !document.getElementById)? 1 : 0; ie4=(document.all && !document.getElementById)? 1 : 0;
	ie5=(document.getElementById && document.all)? 1 : 0; ns6=(document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? 1: 0;
	w3c=(document.getElementById)? 1 : 0; wid=(ie4||ie5)?window.document.body.clientWidth-20:window.innerWidth-36
	if(ns4){document.write ('<layer name="di1"></layer>')}else{document.write ('<div id="di1" style="position:absolute;z-index:100" ></div>')}
	outd=""
	if(w3c)div1=document.getElementById('di1')
	if(ie4)div1=document.all['di1']
	if(ns4)div1=document.layers['di1']
	
	function move_div(x,y){
		if (isNaN(x+y))return
		if(ns4){div1.moveTo(x,y)}else{div1.style.left=val(x-1000)+'px';div1.style.top=val(y-1000)+'px';}
	}
	
	function write_div(text){
		if(ns4){
			div1.document.open(); div1.document.write(text); div1.document.close();
		}
		else {div1.innerHTML=text;}
	}
	 
	function big(n){
	ondiv=n
			write_div("<a href=javascript:void(0) onmouseout='big_hide()' onmouseover='ondiv=1'><img border=0 name=ib src="+n+"></a>"); move_div(x,y)
	}
	
	function big_hide(){
		ondiv=0; t3=window.setTimeout('big_hide2()',100)
	}
	
	function big_hide2(){
	if (ondiv==0){
		write_div(""); move_div(-1000,-1000)}
	}
	
	y=x=0
	function dragIt(evt){if(ie4||ie5){x=window.event.clientX+document.body.scrollLeft; y=window.event.clientY+document.body.scrollTop}else {x=evt.pageX ; y=evt.pageY }}
	
	document.onmousemove = dragIt
	if(ns4){document.captureEvents( Event.MOUSEMOVE )}
Code:
<html>
<head>
</head>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<table align="center">
  <tr> 
    <td>
	<script type="text/javascript" src="main.js">// leave this line inside the table the image is in, it has to be here!</script>
        <div>
          <table>
            <tr>
            <td align="right">
			<a href="javascript:void(0)" onMouseOver="big('http://site.com/david/David.JPG')" onMouseOut="big_hide()">
			<img border="0" name=i1 src="David_tn.JPG">
			</a>
			</td>
            </tr>
          </table>
        </div>
      </td>
  </tr>
</table>
</html>