black hole

I found a black hole script at the JavascriptSource, it works great and i even made a custom hole.gif file that is rotating, the problem is that the code i have between the div tags includes an image. What the script does as of now is show the first frame of the animated gif file until the image "goes through" the hole. is there any way to make the image rotate all along?
here is the script:
<script>
<!--

//removed author information because i wasn't sure if it was aloud; sorry to the autor
var href;
function showBlackHole(){
var obj = document.getElementById("hole").style;
obj.position = 'absolute';
obj.top = Math.round((document.body.clientHeight - document.imgHole.height)/2);
obj.left = Math.round((document.body.clientWidth - document.imgHole.width)/2);
obj.visibility = 'visible';
}

function fitToScreen(){
var obj = document.getElementById("doc").style;
obj.position = 'absolute';
obj.top = 0;
obj.height = document.body.clientHeight;
obj.width = document.body.clientWidth;
obj.overflow = 'hidden';
}

function initImplode(){
if ((!document.all) ŚŚ (!document.getElementById)){
document.location.href = href;
return;
}
showBlackHole();
fitToScreen();
var docdiv = document.getElementById("doc").style;
x1 = parseInt(docdiv.left);
y1 = parseInt(docdiv.top);
x2 = x1 + docdiv.width;
y2 = y1;
x3 = x2;
y3 = y1 + docdiv.height;
x4 = x1;
y4 = y3;

imgdiv = document.getElementById("hole").style;
a1 = parseInt(imgdiv.left);
b1 = parseInt(imgdiv.top);
a2 = a1 + document.imgHole.width;
b2 = b1;
a3 = a2;
b3 = b2 + document.imgHole.height;
a4 = a1;
b4 = b3;

oldWidth = parseInt(docdiv.width);
oldHeight = parseInt(docdiv.height);
blackTimer = null;
i = x1 + 1;
implode();
}

function implode(){

var obj = document.getElementById("doc").style;

if ((parseInt(obj.left) >= a1+Math.ceil(parseInt(document.getElementById('imgHole').height) / 2)) ŚŚ (parseInt(obj.top) >= b1+Math.ceil(parseInt(document.getElementById('imgHole').width) / 2))){
obj.top = b1 + Math.ceil(parseInt(document.getElementById('imgHole').width) / 2);
obj.left = a1 + Math.ceil(parseInt(document.getElementById('imgHole').height) / 2);
obj.width = 0;
obj.height = 0;
stop();
return;
}
obj.left = i;
try{
obj.width = oldWidth - 2*i;
}
catch(e){}
var j = Math.round(((y1-b1)/(x1-a1))*i);
obj.top = j;
try{
obj.height = oldHeight - 2*j;
}
catch(e){}
i+=10;
blackTimer = window.setTimeout("implode()", 1);
}

function stop(){
window.clearTimeout(blackTimer);
document.location.href = href;
}

function hyperlink(ref){
href = ref;
initImplode();
}
-->
</script></head>

<div id="doc" style="position:absolute; top: 5; left: 5;">
<p><img width=600 src="somepic.jpg";?>"></p>
<p><em>caption</em></p>
<p> </p>
<table width="529" height="262" border="0">
<tr>
<td align="left" valign="top">Description:<br>blah blah blah</td>
</tr>
</table>
<p> </p>
<table width="95%" border="0">
<tr>
<td width="33%"><a href = "javascript:hyperlink('last')">< Previous <</a> </td>
<td width="33%" align="center"><a href="javascript:hyperlink('index.php')">Home Page</a> </td>
<td width="34%" align="right"><a href = "javascript:hyperlink('next')"> > Next ></a> </td>
</tr>
</table>
<p align="center"> </p>
</div>
</body>
</html>

black hole

problem with animated gif

WhosAWhata

birdbrain

WhosAWhata

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week