how can we use javascript to make it ?

Last post 05-16-2008 7:55 AM by uwspstar. 3 replies.

Sort Posts:

  • how can we use javascript to make it ?

    05-15-2008, 4:30 PM
    • Member
      733 point Member
    • uwspstar
    • Member since 03-23-2008, 4:36 PM
    • Milwaukee
    • Posts 210

    I found that in the www.Amazon.com. there is cool falsh part ( the book turn arround)

    1) can we make it in javascript?

    2) if we can make it by using javascript, how can we do it ?

    3) any  free- shared study source for similer skill ?

    founder of AskBargains.com



    If you mark as "Answer"other people can use this answer as a reference
  • Re: how can we use javascript to make it ?

    05-15-2008, 5:36 PM
    • Member
      733 point Member
    • uwspstar
    • Member since 03-23-2008, 4:36 PM
    • Milwaukee
    • Posts 210

    how can I upload image to here ?

    founder of AskBargains.com



    If you mark as "Answer"other people can use this answer as a reference
  • Re: how can we use javascript to make it ?

    05-16-2008, 2:40 AM
    Answer
    • Participant
      1,092 point Participant
    • blodfox777
    • Member since 07-12-2007, 12:30 PM
    • Posts 159

    Hi uwspstar

    Run this demo, enjoy the code Smile

     

    <html>
    <head>
        <title>lance</title>
        <style>
            .rotatediv
            {
                position: absolute;
                z-index: 2;
            }
            .nrjj
            {
                text-align: center;
                position: absolute;
                top: 160px;
                left: 230px;
                width: 200px;
                height: 30px;
                background-color: #ffffff;
                visibility: hidden;
                z-index: 1;
            }
            .logo
            {
                text-align: center;
                position: absolute;
                top: 160px;
                left: 230px;
                width: 200px;
                z-index: 0;
            }
        </style>
    
        <script language="JavaScript">
    
            ns4 = (document.layers)? true:false 
            ie4 = (document.all)? true:false
            function showobject(obj) {
            if (ns4) obj.visibility = "show"
            else if (ie4) obj.visibility = "visible"
            }
            function hideobject(obj) {
            if (ns4) obj.visibility = "hide"
            else if (ie4) obj.visibility = "hidden"
            }
            function rotateobj(ctrl) {
            if (ctrl) {
            for (var i = 0; i < pos.length; i++) {
            pos[i] += inc; 
            objects[i].left = (r * Math.cos(pos[i])) + xoff
            objects[i].top = (r * Math.sin(pos[i])) + yoff;}
            rotateTimer = setTimeout("rotateobj(true)", 50);
            }
            else
            clearTimeout(rotateTimer);
            } 
            function initobj() {
            objects = new Array(rotatediv1, rotatediv2, rotatediv3, rotatediv4);
            pos = new Array();
            pos[0] = 0;
            for (var i = 1; i < objects.length; i++) {
            pos[i] = parseFloat(pos[i - 1] + ((2 * pi) / objects.length));
            }
            rotateobj(true);
            }
            var objects;
            var pos;
            var r = 100;
            var xoff = 280;
            var yoff = 170;
            var pi = Math.PI; 
            var inc = pi / 180;
    
        </script>
    
    </head>
    <body>
        <div id="rotatediv1" class="rotatediv" onmouseover="showobject(nrjj1); rotateobj(false)"
            onmouseout="hideobject(nrjj1);rotateobj(true)">
            <p>
                <a href="#">
                    <img src="image/dot.gif" width="11" height="8">Link 1</a><br>
            </p>
        </div>
        <div id="rotatediv2" class="rotatediv" onmouseover="showobject(nrjj2); rotateobj(false)"
            onmouseout="hideobject(nrjj2); rotateobj(true)">
            <p>
                <img src="image/dot.gif" width="11" height="8"><a href="#">Link 2</a><br>
            </p>
        </div>
        <div id="rotatediv3" class="rotatediv" onmouseover="showobject(nrjj3); rotateobj(false)"
            onmouseout="hideobject(nrjj3); rotateobj(true)">
            <p>
                <a href="#">
                    <img src="image/dot.gif" width="11" height="8">Link 3</a><br>
            </p>
        </div>
        <div id="rotatediv4" class="rotatediv" onmouseover="showobject(nrjj4); rotateobj(false)"
            onmouseout="hideobject(nrjj4); rotateobj(true)">
            <p>
                <img src="image/dot.gif" width="11" height="8"><a href="#">Link 4</a><br>
            </p>
        </div>
        <div id="nrjj0" class="logo">
            <p>
                by LanceZhang<br>
                The javascript menu</p>
        </div>
        <div id="nrjj1" class="nrjj">
            <p>
                <img src="image/a6ball.gif" width="18" height="18">There is the Detail of Link 1
            </p>
        </div>
        <div id="nrjj2" class="nrjj">
            <p>
                There is the Detail of Link 2
            </p>
        </div>
        <div id="nrjj3" class="nrjj">
            <p>
                There is the Detail of Link 3
            </p>
        </div>
        <div id="nrjj4" class="nrjj">
            <p>
                There is the Detail of Link 4</p>
        </div>
    
        <script language="JavaScript">
            var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);
            var rotatediv1 = (isNS) ? document.rotatediv1 : document.all.rotatediv1.style;
            var rotatediv2 = (isNS) ? document.rotatediv2 : document.all.rotatediv2.style;
            var rotatediv3 = (isNS) ? document.rotatediv3 : document.all.rotatediv3.style;
            var rotatediv4 = (isNS) ? document.rotatediv4 : document.all.rotatediv4.style;
            var nrjj1 = (isNS) ? document.nrjj1 : document.all.nrjj1.style;
            var nrjj2 = (isNS) ? document.nrjj2 : document.all.nrjj2.style;
            var nrjj3 = (isNS) ? document.nrjj3 : document.all.nrjj3.style;
            var nrjj4 = (isNS) ? document.nrjj4 : document.all.nrjj4.style;
            initobj();
        </script>
    
    </body>
    </html>
    
     
    Regards!

    -- "Mark As Answer" If my reply helped you --
  • Re: how can we use javascript to make it ?

    05-16-2008, 7:55 AM
    • Member
      733 point Member
    • uwspstar
    • Member since 03-23-2008, 4:36 PM
    • Milwaukee
    • Posts 210

    You are the man !!!!!!!!!

    it is what I want to learn !!!!

    founder of AskBargains.com



    If you mark as "Answer"other people can use this answer as a reference
Page 1 of 1 (4 items)