...

View Full Version : larger image overlay on hover not working now?



jasonc310771
09-25-2008, 01:36 PM
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.!




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

Arty Effem
09-25-2008, 10:13 PM
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 (http://scripterlative.com?magnifimage) makes configuring for multiple images slightly simpler.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum