onMouseOver works on my computer, but not online

naomiomio · #1 (**permalink**) 03-03-06, 09:29 AM

Hi again,

Sorry to bug you folks, and thanks so much for your help with the last issue.

I have a problem with an onMouseOver that's an essential part of my site. What it's supposed to do is create several moving divs when you mouse over the main phrase in the centre of the screen. Here's the page. I had a lot of help with it, and it all works fine on my computer, but I just uploaded it and it doesn't seem to work online, either in iexplorer or firefox. I checked for capitalisation errors, but couldn't find any... Could anyone give me a hand?

Here's the script:

Code:

<html>

<head>

<style type="text/css">

#body1 {
  background: #4F4F4F url("images/stairs.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

#body2 {
  background: #4F4F4F url("images/stairs-maids.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

#body3 {
  background: #4F4F4F url("images/stairs-car.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

#body4 {
  background: #4F4F4F url("images/stairs-fort.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}


a{text-decoration: none}


</style>

<script type="text/javascript"> 
<!-- 

var vmin=1 
var vmax=15 
var vr=5 
var timer 
moz=document.getElementById&&!document.all 

function createObj(id,c){ 
	this.id=id 
	this.vx=vmin+vmax*Math.random() 
	this.vy=vmin+vmax*Math.random() 
	this.posX=document.getElementById(c).offsetLeft 
	this.posY=document.getElementById(c).offsetTop 
	this.w=document.getElementById(this.id).offsetWidth 
	this.h=document.getElementById(this.id).offsetHeight 
	this.timer=null 

	if(moz){ 
		pageX=window.pageXOffset 
		pageW=window.innerWidth 
		pageY=window.pageYOffset 
		pageH=window.innerHeight 
	} 
	else{ 
		pageX=document.body.scrollLeft 
		pageW=document.body.clientWidth 
		pageY=document.body.scrollTop 
		pageH=document.body.clientHeight 
	}  

	this.moveObj=function(d){ 
		clearTimeout(this.timer) 
		this.obj=d 

		this.posX+=this.vx 
		this.posY+=this.vy 

		this.vx+=vr*(Math.random()-0.5) 
		this.vy+=vr*(Math.random()-0.5) 
		if(this.vx>(vmax+vmin)){this.vx=(vmax+vmin)*2-this.vx} 
		if(this.vx<(-vmax-vmin)){this.vx=(-vmax-vmin)*2-this.vx} 
		if(this.vy>(vmax+vmin)){this.vy=(vmax+vmin)*2-this.vy} 
		if(this.vy<(-vmax-vmin)){this.vy=(-vmax-vmin)*2-this.vy} 


		if(this.posX<=pageX){ 
			this.posX=pageX 
			this.vx=vmin+vmax*Math.random() 
		} 

		if(this.posX>=pageX+pageW-this.w){ 
			this.posX=pageX+pageW-this.w 
			this.vx=-vmin-vmax*Math.random() 
		} 

		if(this.posY<=pageY){ 
			this.posY=pageY 
			this.vy=vmin+vmax*Math.random() 
		} 

		if(this.posY>=pageY+pageH-this.h){ 
			this.posY=pageY+pageH-this.h 
			this.vy=-vmin-vmax*Math.random() 
		} 

		document.getElementById(this.id).style.visibility="visible" 
		document.getElementById(this.id).style.top=this.posY 
		document.getElementById(this.id).style.left=this.posX 
		this.timer=setTimeout(this.obj+".moveObj('"+this.obj+"')",50) 
	} 

	this.stopme=function(){ 
		if(this.timer!=null){ 
		clearTimeout(this.timer)} 
	} 

} 

function createEffect(){ 
myObject1=new createObj("div1","lnk1") // create 
myObject2=new createObj("div2","lnk1") 
myObject3=new createObj("div3","lnk1")  

//myObject1.moveObj("myObject1") // initiate 
//myObject2.moveObj("myObject2") 
//myObject3.moveObj("myObject3") 

} 

// --> 
</script>

</head>

<body id="body1" link="#000000" vlink="#000000" alink="#000000" onLoad="createEffect()">

<br><br><br><br><br><br><br><br><br>
<h1 align="center">
<font size=9 face=arial>

<a id="lnk1" href="#null" onMouseOver="myObject1.moveObj('myObject1'), onMouseOver=myObject2.moveObj('myObject2'), onMouseOver=myObject3.moveObj('myObject3')" onClick="myObject1.stopme(), onClick=myObject2.stopme(), onClick=myObject3.stopme()">A dark staircase<br>that might have<br>been a dream</a>
</font>
</h1>

<font size=5 face="arial">

<div id="div1" style="position:absolute; visibility:hidden"><font size=6><a href="maids.html"
onMouseOver="this.innerHTML = 'maids in blue'; body.id='body2'"
onMouseOut="this.innerHTML = 'servants only'; body.id='body1'">servants only
</a></font></div> 

<div id="div2" style="position:absolute; visibility:hidden"><a href="car.html"
onMouseOver="this.innerHTML = 'on the way'; body.id='body3'"
onMouseOut="this.innerHTML = 'discussed'; body.id='body1'">discussed
</a></div>

<div id="div3" style="position:absolute; visibility:hidden"><a href="fort.html" onMouseOver="this.innerHTML = 'some holiday'; body.id='body4'"
onMouseOut="this.innerHTML = 'what house?'; body.id='body1'">what house?
</a></div>


</font>

</center>
</body>
</html>

Thanks very much,
Naomi

TwoD · #2 (**permalink**) 03-03-06, 06:08 PM

Hi again Naomi,
You're welcome, I'm glad we could be of assistance here at PT.
Btw, we're here to be 'bugged' so no need to be sorry

This line caught my eye.

Code:

<a id="lnk1" href="#null" onMouseOver="myObject1.moveObj('myObject1'), onMouseOver=myObject2.moveObj('myObject2'), onMouseOver=myObject3.moveObj('myObject3')" onClick="myObject1.stopme(), onClick=myObject2.stopme(), onClick=myObject3.stopme()">A dark staircase<br>that might have<br>been a dream</a>

The correct syntax would be:

Code:

<a id="lnk1" href="#null" onMouseOver="myObject1.moveObj('myObject1');myObject2.moveObj('myObject2');myObject3.moveObj('myObject3')" onClick="myObject1.stopme();myObject2.stopme();myObject3.stopme()">A dark staircase<br>that might have<br>been a dream</a>

I don't know about the rest of the code since I haven't tested it.

EDIT: I might add that I'm not sure that was the reason it didn't work online. (Might be a conflict between the angelfire ad code's global variables and yours. Stupid coders at angelfire... and geocities too I might add...)

Btw, what your code did was to catch an onmouseover event, run the first object's method, then create a (global) variable named onMouseOver and assign the return value of your other object methods to it. Same thing with the onclick event. This means the methods would still be executed, but you have some unneccesary code.

naomiomio · #3 (**permalink**) 03-04-06, 05:50 AM

Thanks again for all your help

I edited the code you pointed out and it didn't seem to make a difference, but thanks anyway - 'tidying up' my code a bit has to be a good thing.

If it's just an issue with angelfire, then that's OK - I'm actually having my site hosted by someone else, and was just using angelfire for the purposes of testing it online before sending them the files.

TwoD · #4 (**permalink**) 03-04-06, 06:14 AM

I have now confirmed that it is Angelfire's fault that your script fails.
Their ad code uses variables with the same name as variables in your code, and they 'override' your script since they are loaded last.

In my opinion, many of the Javascripts used in ads by free webhosts are extremey poorly written for they very often interfere with the code of their customers.

naomiomio · #5 (**permalink**) 03-04-06, 02:02 PM

Thanks - it makes me feel better knowing it's angelfire's fault not mine!