several images circling 1 image [Archive]

Click to See Complete Forum and Search --> : several images circling 1 image

rIcKsTeR

07-31-2003, 12:50 AM

hello all!

I'm looking for a javascript that might possibly set up 6 photos of my grandkids circling endlessly around a pic of my wife.

any ideas?
thanks, rick....

Gollum

07-31-2003, 02:22 AM

This was fun...

<html>
<head>

<script type="text/javascript">
var data =
{
mum:
{
width:89,
height:119
},

radius:150,

dAngle:2 * Math.PI / 600,
dTime:5,

kids:
[
{
id:'kid1',
width:111,
height:68
},
{
id:'kid2',
width:103,
height:85
}
]
};

function Animate()
{
var nKids = data.kids.length;
for ( var i = 0; i < nKids; i++ )
{
var kid = data.kids[i];
kid.angle += data.dAngle;

kid.oDiv.style.top = Math.round(-Math.cos(kid.angle) * data.radius + (data.mum.height - kid.height) / 2);
kid.oDiv.style.left = Math.round(Math.sin(kid.angle) * data.radius + (data.mum.width - kid.width) / 2);
}

window.setTimeout("Animate();",data.dTime);
}

function Circle()
{
// initialise
var nKids = data.kids.length;
for ( var i = 0; i < nKids; i++ )
{
data.kids[i].angle = 2 * Math.PI * i / nKids;
data.kids[i].oDiv = document.getElementById(data.kids[i].id);
}

Animate();
}

</script>
</head>
<body onload="Circle();">
<table border=0 cellspacing=0>
<tr><td colspan=3 height=150> </td></tr>
<tr>
<td width=150> </td>
<td><div style="position:relative;">
<div style="position:absolute;"><img src="mum.jpg"></div>
<div id=kid1 style="position:absolute;"><img src="kid1.jpg"></div>
<div id=kid2 style="position:absolute;"><img src="kid2.jpg"></div>
</div></td>
<td width=150> </td>
</tr>
<tr><td colspan=3 height=100> </td></tr>
</table>
</body>
</html>

This example works for two kids, just add more divs in the HTML and structures in the data.kids array for more

rIcKsTeR

08-03-2003, 12:41 AM

sorry for not thanking u sooner Gollum. Havent tried the code yet and probably wont get a chance this weekend, but i ccp'd it and will defintely give it awhirl! Thanks again!!

rIcKsTeR

08-03-2003, 10:36 AM

You are an absolute GENIUS! You have made me a very HAPPY grandpa, 'cus I know my wife will just ADORE me now! L.O.L.!!

Here is the addy so you can view your handywork:

http://www.angelfire.
com/ultra/colfax_home_for_sale/Dedication/page2.html

Thanks again!

Rick...

rIcKsTeR

08-03-2003, 10:45 AM

SORRY!!!
Goofed up and didnt hit the URL option button, so here is the addy again:

[URL=http://www.angelfire.com/ultra/colfax_home_for_sale/Dedication/page2.html[/URL]