www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Rotating an image hexagon counter-clockwise

Hybrid View

  1. #1
    Join Date
    Mar 2011
    Posts
    1

    resolved [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.

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    Not sure if this will help, or not, but..

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

    ^_^

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles