# [RESOLVED] Rotating an image hexagon counter-clockwise

• 03-09-2011, 03:34 PM
NotSoAverageJoe
[RESOLVED] Rotating an image hexagon counter-clockwise
I've just started learning how to do Javascript, so please bare with me.

I have a Javascript program that takes 6 images (I chose random teachers I knew) and displays them in the form of a hexagon. Now, I'm trying to set it up so the image hexagon will rotate counter clockwise for 3000 milliseconds. problem is I can't seem to figure out the best way to set this part up. here's my code so far:

Code:

```<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>CS faculty members in hexagonal array</title> <script type="text/javascript">         <!--         var pixArray = Array(6);         function shiftPix(element, count, index) {                 var pi = 3.1415926535;  // Number.PI SHOULD work but doesn't seem to.                 // left: x coordinate, top: y coordinate                 y = 300 + 150 * Math.cos(2 * pi * (count + index)/6);                   x = 300 + 150 * Math.sin(2 * pi * (count + index)/6);                   element.style.left = x + "px";                   element.style.top = y + "px";         }         function display() {                   for (j = 0; j < 6 ; j++) {                         shiftPix(pixArray[j], counter, j);                 }         }         // --> </script> </head> <body>   <div id="John" style="position:absolute;left:300px;top:450px">           <img src="picture1.jpg" alt="John Santore" width="90" height="120" />   </div>   <div id="Seikyung" style="position:absolute;left:430px;top:375px">           <img src="picture2.jpg" alt="Seikyung Jung" width="90" height="120" />   </div>   <div id="Glenn" style="position:absolute;left:430px;top:225px">           <img src="picture3.jpg" alt="Glenn Pevlicek" width="90" height="120" />   </div>   <div id="Lee" style="position:absolute;left:300px;top:150px">           <img src="picture4.jpg" alt="Lee Mondshein" width="90" height="120" />   </div>   <div id="Abdul" style="position:absolute;left:170px;top:225px">           <img src="picture5.jpg" alt="Abdul Sattar" width="90" height="120" />   </div>   <div id="Toby" style="position:absolute;left:170px;top:375px">           <img src="picture6.jpg" alt="Toby Lorenzen" width="90" height="120" />   </div>   <script type="text/javascript">         <!--           var counter = 0;           pixArray[0] = document.getElementById("John");           pixArray[1] = document.getElementById("Seikyung");           pixArray[2] = document.getElementById("Glenn");           pixArray[3] = document.getElementById("Lee");           pixArray[4] = document.getElementById("Abdul");           pixArray[5] = document.getElementById("Toby");           display();         // -->   </script> </body> </html>```
The highlighted areas where I'm pretty sure I should start modifying and for the timer, I know I should have it set up something like "setTimeOut("display"(), 3000), I'm just stuck on where to go from. If there's anything you could do to help me out with this, I'd really appreciate it.
• 03-09-2011, 03:56 PM
Not sure if this will help, or not, but..

http://www.w3schools.com/jsref/jsref_pi.asp

^_^
• 03-09-2011, 05:01 PM
tirna
Looks like this homework exercise has been doing the rounds in various forums over the last couple of weeks ;)

Code:

``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">     <head>         <title></title>         <style type="text/css">             #container {                 position: relative;                 width: 420px;                 margin: 50px auto 0px auto;             }             #pic1Cont {                 position:absolute; left:160px; top:0px             }             #pic2Cont {                 position:absolute; left:0px; top:130px             }             #pic3Cont {                 position:absolute; left:0px; top:280px             }             #pic4Cont {                 position:absolute; left:160px; top:410px             }             #pic5Cont {                 position:absolute; right:0px; top:280px             }             #pic6Cont {                 position:absolute; right:0px; top:130px             }         </style>         <script type="text/javascript">             var picPaths = ['num1.jpg','num2.jpg','num3.jpg','num4.jpg','num5.jpg','num6.jpg'];             //preload the pics             var oPics = new Array();             for(i=0; i < picPaths.length; i++){                 oPics[i] = new Image();                 oPics[i].src = picPaths[i];             }             function rotateImages(){                 for(i=0; i < oImgs.length; i++) {                     oImgs[i].curPic = (--oImgs[i].curPic < 0)? oPics.length-1 : oImgs[i].curPic;                     oImgs[i].src = oPics[oImgs[i].curPic].src;                 }             }             window.onload=function(){                 oImgs = document.getElementById('container').getElementsByTagName('img');                 for(i=0; i < oImgs.length; i++){                     oImgs[i].src = oPics[i].src;                     oImgs[i].curPic = i;                 }               setInterval(rotateImages,3000);             }         </script>     </head>     <body>         <div id="container">             <div id="pic1Cont">                 <img src=""  width="90" height="120" />             </div>             <div id="pic2Cont">                 <img src=""  width="90" height="120" />             </div>             <div id="pic3Cont">                 <img src=""  width="90" height="120" />             </div>             <div id="pic4Cont">                 <img src=""  width="90" height="120" />             </div>             <div id="pic5Cont">                 <img src="" width="90" height="120" />             </div>             <div id="pic6Cont">                 <img src=""  width="90" height="120" />             </div>         </div>     </body> </html>```

## X vBulletin 4.2.2 Debug Information

• Page Generation 0.09981 seconds
• Memory Usage 2,390KB
• Queries Executed 11 (?)
Template Usage (20):
• (2)bbcode_code_printable
• (1)footer
• (1)gobutton
• (1)navbar_moderation
• (1)navbar_noticebit
• (2)option
• (1)spacer_close
• (1)spacer_open

Phrase Groups Available (3):
• global
• postbit
Included Files (19):
• ./global.php
• ./includes/class_bootstrap.php
• ./includes/init.php
• ./includes/class_core.php
• ./includes/config.php
• ./includes/functions.php
• ./includes/class_friendly_url.php
• ./includes/class_hook.php
• ./includes/class_bootstrap_framework.php
• ./vb/vb.php
• ./vb/phrase.php
• ./includes/functions_calendar.php
• ./includes/class_bbcode_alt.php
• ./includes/class_bbcode.php
• ./includes/functions_bigthree.php
• ./includes/functions_notice.php

Hooks Called (41):
• init_startup
• init_startup_session_setup_start
• database_pre_fetch_array
• database_post_fetch_array
• init_startup_session_setup_complete
• global_bootstrap_init_start
• global_bootstrap_init_complete
• cache_permissions
• fetch_foruminfo
• global_state_check
• global_bootstrap_complete
• global_start
• style_fetch
• global_setup_complete
• bbcode_fetch_tags
• bbcode_create
• bbcode_parse_start
• cache_templates
• cache_templates_process
• template_register_var
• template_render_output
• fetch_template_start
• fetch_template_complete
• parse_templates