change image location on hover viewing

jasonc · September 29, 2008

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.

main.js

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 )}

<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>

Sign In

change image location on hover viewing

Recommended Posts

jasonc

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information