« »

Something rather weird happens on your webpage: after loading the texts start changing its colors in a creepy way continously! Is this witchery? Is this the frightening cyberghost haunting your screen? Or is it just a little bit DHTML-magic? You decide (and then call the ghostbusters, please).

Label: Ghostpage, haunt, weird, frighten, cyberghost, DHTML, magic, ghostbusters

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script>
<!-- Beginning of JavaScript -
// Ghostpage: your text will be haunted
// Author: Peter Gehrig 
// Web Site: http://www.24fun.com 


// do not edit the variables below
var floatingspeed=15
var clipleft=new Array()
var clipright=new Array()
var cliptop=new Array()
var clipbottom=new Array()
var clipwidth=new Array()
var clipheight=new Array()
var clipwidthmax=600
var clipheightmax=400
var tempo=20
var numberofghosts=2
var stepx=new Array()
var stepy=new Array()
for (i=0;i<=numberofghosts;i++) {
	stepx[i]=randommaker(floatingspeed)
	stepy[i]=randommaker(floatingspeed)
}
var imgwidth=new Array()
var imgheight=new Array()

var marginbottom=0
var marginleft=0
var margintop=0
var marginright=0
var timer

function setValues() {
	if (document.all) {
		marginleft=document.all.ghost0.style.posLeft
		margintop=document.all.ghost0.style.posTop
    	marginbottom=document.body.clientHeight
    	marginright=document.body.clientWidth
		for (i=0;i<=numberofghosts;i++) {             	
        	clipleft[i]=randommaker(marginright+clipwidthmax)-clipwidthmax
			cliptop[i]=randommaker(margintop+clipheightmax)-clipheightmax
			clipheight[i]=randommaker(clipheightmax)
			clipwidth[i]=randommaker(clipwidthmax)
		}
		checkmovement()
	}
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
	if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function checkmovement() {
	if (document.all) {
		checkposition()
		movepictures()
    	timer=setTimeout("checkmovement()",tempo)
	}
}

function movepictures() {
		if (document.all) {
			for (i=0;i<=numberofghosts;i++) {  
    			var thisspan=eval("document.all.ghost"+(i)+".style")
    			clipleft[i]+=stepx[i]
				clipright[i]=clipleft[i]+clipwidth[i]
				cliptop[i]+=stepy[i]
				clipbottom[i]=cliptop[i]+clipheight[i]
				thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
    		}
		}
}

function checkposition() {
	if (document.all) {
		for (i=0;i<=numberofghosts;i++) {             
			var thisspan=eval("document.all.ghost"+i+".style")
			if (clipright[i]>marginright) {	
				clipleft[i]-=Math.abs(stepx[i]+1)
				clipright[i]=clipleft[i]+clipwidth[i]
				thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (clipleft[i]<marginleft) {
				clipleft[i]+=Math.abs(stepx[i]+1)
				clipright[i]=clipleft[i]+clipwidth[i]
				thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (clipbottom[i]>marginbottom) {
				cliptop[i]-=Math.abs(stepy[i])
				clipbottom[i]=cliptop[i]+clipheight[i]
				thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
				stepy[i]=randommaker(floatingspeed)*-1
			}
			if (cliptop[i]<margintop) {
				cliptop[i]+=Math.abs(stepy[i])
				clipbottom[i]=cliptop[i]+clipheight[i]
				thisspan.clip ="rect("+cliptop[i]+" "+clipright[i]+" "+clipbottom[i]+" "+clipleft[i]+")"
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
}

// - End of JavaScript - -->
</script>

Copy All x2

<body id="thisbody" onLoad="setValues()">
<DIV id="ghost0" style="position:absolute;top:10px;left:0px;">
<font size=2 face=Verdana color=333333><ul><b>Ghostpage: your text will be 
	haunted</b>
<li>Something rather strange happens on this webpage: After loading the text 
starts changing its colors in a creepy way! Is this witchery? Is this the 
frightening cyberghost haunting your screen? Or is it just a little bit 
DHTML-magic? You decide (and then call the ghostbusters, please). 
<li>Internet Explorer 4 or higher

</ul>
<b>Configuration</b>
<li>Open the HTML-file.
<li>Go to the <body>-section of the HTML-file and put the content of your 
webpage into a <div>-container.
<li>Name this <div>-container id="mastercontent".
<li>Attention: the <div>-container must be set to an absolute position!

<li>Copy the whole <div>-container with the id="mastercontent" and paste it 
three times below the <div>-container with the id="mastercontent".
<li>Give the three new <div>-containers a new id: &#39;gost0&#39;, &#39;ghost1&#39;, &#39;ghost2&#39;.

<li>Do not change anyhing at all inside the three new <div>-containers <b>except 
for the colors of your fonts!</b> The change of fontcolors will create the 
strange effect!
<li>Sounds tooooooooo complicated? No, it&#39;s not. In fact it&#39;s very easy. After 
customizing the HTML-page it should look like this:
<br><br> 
<table border=1 cellspacing=0 cellpadding=4><tr><td bgcolor=EEEEFF>
<font size=2 face=Verdana color=666666>
<DIV id="<b>mastercontent</b>" style="position:absolute;top:50px;left:0px;"><br>

&nbsp;&nbsp;&nbsp;&nbsp;your original webcontent (original fontcolors)<br>
</DIV><br><br>
<DIV id="<b>ghost0</b>" style="position:absolute;top:50px;left:0px;"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>your original webcontent (changed fontcolors)</font><br>
</DIV><br><br>
<DIV id="<b>ghost1</b>" style="position:absolute;top:50px;left:0px;"><br>

&nbsp;&nbsp;&nbsp;&nbsp;<font color=green>your original webcontent (changed fontcolors)</font><br>
</DIV><br><br>
<DIV id="<b>ghost2</b>" style="position:absolute;top:50px;left:0px;"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<font color=brwon>your original webcontent (changed fontcolors)</font><br>
</DIV><br><br>
</td></tr></table>
<br>
<li>And now let&#39;s have some fun and haunt the cyberspace!

</font>
</ul>
</DIV>

<DIV id="ghost1" style="position:absolute;top:10px;left:0px;">
<font size=2 face=Verdana color=660000><ul><b>Ghostpage: your text will be 
	haunted</b>
<li>Something rather strange happens on this webpage: After loading the text 
starts changing its colors in a creepy way! Is this witchery? Is this the 
frightening cyberghost haunting your screen? Or is it just a little bit 
DHTML-magic? You decide (and then call the ghostbusters, please). 
<li>Internet Explorer 4 or higher
</ul>
<b>Configuration</b>
<li>Open the HTML-file.
<li>Go to the <body>-section of the HTML-file and put the content of your 
webpage into a <div>-container.

<li>Name this <div>-container id="mastercontent".
<li>Attention: the <div>-container must be set to an absolute position!
<li>Copy the whole <div>-container with the id="mastercontent" and paste it 
three times below the <div>-container with the id="mastercontent".

<li>Give the three new <div>-containers a new id: &#39;gost0&#39;, &#39;ghost1&#39;, &#39;ghost2&#39;.
<li>Do not change anyhing at all inside the three new <div>-containers <b>except 
for the colors of your fonts!</b> The change of fontcolors will create the 
strange effect!
<li>Sounds tooooooooo complicated? No, it&#39;s not. In fact it&#39;s very easy. After 
customizing the HTML-page it should look like this:

<br><br> 
<table border=1 cellspacing=0 cellpadding=4><tr><td bgcolor=EEEEFF>
<font size=2 face=Verdana color=660000>
<DIV id="<b>mastercontent</b>" style="position:absolute;top:50px;left:0px;"><br>
&nbsp;&nbsp;&nbsp;&nbsp;your original webcontent (original fontcolors)<br>
</DIV><br><br>
<DIV id="<b>ghost0</b>" style="position:absolute;top:50px;left:0px;"><br>

&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>your original webcontent (changed fontcolors)</font><br>
</DIV><br><br>
<DIV id="<b>ghost1</b>" style="position:absolute;top:50px;left:0px;"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<font color=green>your original webcontent (changed fontcolors)</font><br>
</DIV><br><br>
<DIV id="<b>ghost2</b>" style="position:absolute;top:50px;left:0px;"><br>

&nbsp;&nbsp;&nbsp;&nbsp;<font color=brown>your original webcontent (changed fontcolors)</font><br>
</DIV><br><br>
</td></tr></table>
<br>
<li>And now let&#39;s have some fun and haunt the cyberspace!
</font>
</ul>
</DIV>
<DIV id="ghost2" style="position:absolute;top:10px;left:0px;">
<b>Configuration</b>
<li>Open the HTML-file.
<li>Go to the <body>-section of the HTML-file and put the content of your 
webpage into a <div>-container.

<li>Name this <div>-container id="mastercontent".
<li>Attention: the <div>-container must be set to an absolute position!
<li>Copy the whole <div>-container with the id="mastercontent" and paste it 
three times below the <div>-container with the id="mastercontent".

<li>Give the three new <div>-containers a new id: &#39;gost0&#39;, &#39;ghost1&#39;, &#39;ghost2&#39;.
<li>Do not change anyhing at all inside the three new <div>-containers <b>except 
for the colors of your fonts!</b> The change of fontcolors will create the 
strange effect!
<li>Sounds tooooooooo complicated? No, it&#39;s not. In fact it&#39;s very easy. After 
customizing the HTML-page it should look like this:

<br><br> 
<table border=1 cellspacing=0 cellpadding=4><tr><td bgcolor=EEEEFF>
<font size=2 face=Verdana color=000066>
<DIV id="<b>mastercontent</b>" style="position:absolute;top:50px;left:0px;"><br>
&nbsp;&nbsp;&nbsp;&nbsp;your original webcontent (original fontcolors)<br>
</DIV><br><br>
<DIV id="<b>ghost0</b>" style="position:absolute;top:50px;left:0px;"><br>

&nbsp;&nbsp;&nbsp;&nbsp;<font color=red>your original webcontent (changed fontcolors)</font><br>
</DIV><br><br>
<DIV id="<b>ghost1</b>" style="position:absolute;top:50px;left:0px;"><br>
&nbsp;&nbsp;&nbsp;&nbsp;<font color=green>your original webcontent (changed fontcolors)</font><br>
</DIV><br><br>
<DIV id="<b>ghost2</b>" style="position:absolute;top:50px;left:0px;"><br>

&nbsp;&nbsp;&nbsp;&nbsp;<font color=brwon>your original webcontent (changed fontcolors)</font><br>
</DIV><br><br>
</td></tr></table>
<br>
<li>And now let&#39;s have some fun and haunt the cyberspace!
</font>
</ul>
</DIV>
</body>