several images circling 1 image

@GollumJul 31.2003 — #This was fun...

<i>
 </i>&lt;html&gt;
 &lt;head&gt;
 
 &lt;script type="text/javascript"&gt;
 var data =
 {
 mum:
 {
 width:89,
 height:119
 },
 
 <i>	</i>radius:150,
 
 <i>	</i>dAngle:2 * Math.PI / 600,
 <i>	</i>dTime:5,
 
 <i>	</i>kids:
 <i>	</i>[
 <i>	</i>	{
 <i>	</i>		id:'kid1',
 <i>	</i>		width:111,
 <i>	</i>		height:68
 <i>	</i>	},
 <i>	</i>	{
 <i>	</i>		id:'kid2',
 <i>	</i>		width:103,
 <i>	</i>		height:85
 <i>	</i>	}
 <i>	</i>]
 };
 
 function Animate()
 {
 var nKids = data.kids.length;
 for ( var i = 0; i &lt; nKids; i++ )
 {
 var kid = data.kids[i];
 kid.angle += data.dAngle;
 
 <i>	</i>	kid.oDiv.style.top = Math.round(-Math.cos(kid.angle) * data.radius + (data.mum.height - kid.height) / 2);
 <i>	</i>	kid.oDiv.style.left = Math.round(Math.sin(kid.angle) * data.radius + (data.mum.width - kid.width) / 2);
 <i>	</i>}
 
 <i>	</i>window.setTimeout("Animate();",data.dTime);
 }
 
 function Circle()
 {
 // initialise
 var nKids = data.kids.length;
 for ( var i = 0; i &lt; nKids; i++ )
 {
 data.kids[i].angle = 2 * Math.PI * i / nKids;
 data.kids[i].oDiv = document.getElementById(data.kids[i].id);
 }
 
 <i>	</i>Animate();
 }
 
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body onload="Circle();"&gt;
 &lt;table border=0 cellspacing=0&gt;
 &lt;tr&gt;&lt;td colspan=3 height=150&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
 &lt;tr&gt;
 &lt;td width=150&gt;&amp;nbsp;&lt;/td&gt;
 &lt;td&gt;&lt;div style="position:relative;"&gt;
 &lt;div style="position:absolute;"&gt;&lt;img src="mum.jpg"&gt;&lt;/div&gt;
 &lt;div id=kid1 style="position:absolute;"&gt;&lt;img src="kid1.jpg"&gt;&lt;/div&gt;
 &lt;div id=kid2 style="position:absolute;"&gt;&lt;img src="kid2.jpg"&gt;&lt;/div&gt;
 &lt;/div&gt;&lt;/td&gt;
 &lt;td width=150&gt;&amp;nbsp;&lt;/td&gt;
 &lt;/tr&gt; 
 &lt;tr&gt;&lt;td colspan=3 height=100&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
 &lt;/table&gt;
 &lt;/body&gt;
 &lt;/html&gt;

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

@rIcKsTeRauthorAug 03.2003 — #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!!

@rIcKsTeRauthorAug 03.2003 — #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...

@rIcKsTeRauthorAug 03.2003 — #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]

several images circling 1 image

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

several images circling 1 image

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴