Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts

    larger image overlay on hover not working now?

    i have had no problems before and now the code does not work, i thought it could be due to it being used in tables so placed it in a table and still not working.

    when you hover over the image, it opens up a new layer with a larger version of that image.

    i tested in IE and now it shows error that div1 is not defined.

    also is there now an easier way to do this as i have been looking and see loads but all having a lot more code involved or having to redo images so i have TN and large in one image! not an option with this project as there is likely to be loads of images.!


    Code:
    <html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script>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")
    </script>
    
    <script>
    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=x+'px';div1.style.top=y+'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 )}
    </script>
    </head><body>
      <div align="center">
        <table border=1 align="center">
          <tr>
            <td align=center>
    		<a href="javascript:void(0)" onMouseOver="big('http://site.com/David.JPG')" onMouseOut="big_hide()">
    		<img border="0" name=i1 src="David.JPG">
    		</a>
    		</td>
          </tr>
        </table>
        </div>
    </body></html>

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    Quote Originally Posted by jasonc310771 View Post
    i have had no problems before and now the code does not work, i thought it could be due to it being used in tables so placed it in a table and still not working.

    when you hover over the image, it opens up a new layer with a larger version of that image.

    i tested in IE and now it shows error that div1 is not defined.
    This script is located in the <head> but writes into document.body, which isn't rendered at the time. You would have to move the script into the <body> section. Other browsers are probably waiting for the body to render.

    MagnifImage makes configuring for multiple images slightly simpler.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •