<html>
<style>
#div { position: absolute; z-index: -200; }
</style>
<head>
<script type="text/javascript">
var div1 = false;
var div2 = false;
var div3 = false;
var div4 = false;
// These are the Functions to move the divs left. If you Mouse off of the blue div (the big one), the int divs go left.
function mouseOff1() {
if (div1 = true);
{
moveLeft1()
}
else;
{null;}
function mouseOff2() {
if (div2 = true);
{
moveLeft2()
}
else;
{null;}
function mouseOff3() {
if (div3 = true);
{
moveLeft3()
}
else;
{null;}
function mouseOff4() {
if (div4 = true);
{
moveLeft4()
}
else;
{null;}
// End of mouse off functions
// MouseOver functions, if you mouseover one certain div, it will go to the right.
function mouseOver1() {
if (div1 = false);
{
moveRight1()
}
else;
{null;}
function mouseOver2() {
if (div2 = false);
{
moveRight2()
}
else;
{null;}
function mouseOver3() {
if (div3 = false);
{
moveRight3()
}
else;
{null;}
function mouseOver4() {
if (div4 = false);
{
moveRight4()
}
else;
{null;}
// Move Right Functions
function moveRight1() {
this.style.left = (this.style.left+10)+'px'; // pseudo-property code: Move right by 10px
setInterval(moveRight1,20); // call doMove() every 20 msec
div1 = true
}
function moveRight2() {
this.style.left = (this.style.left+10)+'px'; // pseudo-property code: Move right by 10px
setInterval(moveRight2,20); // call doMove() every 20 msec
div2 = true
}
function moveRight3() {
this.style.left = (this.style.left+10)+'px'; // pseudo-property code: Move right by 10px
setInterval(moveRight3,20); // call doMove() every 20 msec
div3 = true
}
function moveRight4() {
this.style.left = (this.style.left+10)+'px'; // pseudo-property code: Move right by 10px
setInterval(moveRight4,20); // call doMove() every 20 msec
div4 = true
}
// Move Left Functions
function moveLeft1() {
this.style.left = (this.style.left-10)+'px'; //move left by 10px
setInterval(moveLeft1,20);
div1 = false
}
function moveLeft2() {
this.style.left = (this.style.left-10)+'px'; // move left by 10px
setInterval(moveLeft2,20);
div2 = false
}
function moveLeft3() {
this.style.left = (this.style.left-10)+'px'; // move left by 10 px
setInterval(moveLeft3,20);
div3 = false
}
function moveLeft4() {
this.style.left = (this.style.left-10)+'px'; // move left by 10px
setInterval(moveLeft4,20);
div4 = false
}
</script>
</head>
<body>
<div id="div" style="background: blue; height: 700px; width:300px;" onmouseout="mouseOff1(),mouseOff2(),mouseOff3(),mouseOff4()"></div>
<div id="div1" style="background: black; height:100px; width:100px;" onmouseover="mouseOver1()"></div>
<br>
<div id="div2" style="background: black; height:100px; width:100px;" onmouseover="mouseOver2()"></div>
<br>
<div id="div3" style="background: black; height:100px; width:100px;" onmouseover="mouseOver3()"></div>
<br>
<div id="div4" style="background: black; height:100px; width:100px;" onmouseover="mouseOver4()"></div>
<br>
</body></html>This topic is archived.