Results 1 to 2 of 2
  1. #1
    Join Date
    Sep 2008
    Posts
    9

    image swapping javascript (was "I need help! Please")

    Hi! Anyone can please to take a look at the below javascript and tell me what's wrong with it. It supposes to move words and pics to the center, and every 2 seconds when the browser loaded , a image will be swapped with the next image in the stack, totally 3 images. but I can't get it to work. just swap 2 images stack, not 2.

    Ken

    -----------Index.htm------------------------------

    <html>
    <head>

    <title> Avalon Books</title>

    <script language="JavaScript">
    if (document.layers) location.href="avalon2.htm"
    else if (document.all) location.href="avalon2.htm"
    else if (document.getElementById) location.href="avalon2.htm"
    </script>
    </head>

    <body style="background-color: black">
    <p style="text-align: center">
    <img src="ablogo.jpg" alt="Avalon Books" /><br />
    <img src="ab.gif" alt="" />
    </p>
    </body>
    </html>

    ------------------avalon2.htm-------------------------------
    <html>
    <head>

    <title>Avalon Books</title>
    <link href="styles2.css" rel="stylesheet" type="text/css" />
    <script src="scripts2.js" type="text/javascript"></script>
    <script type="text/javascript">

    W=winWidth()/2;

    function placeObjects(){
    placeIt("avalon",0,0);
    placeIt("kids",W-75,100);
    placeIt("fiction",W-75,100);
    placeIt("nfiction",W-75,100);
    setZ("kids",3);
    setZ("fiction",2);
    setZ("nfiction",1);
    moveAvalon();
    }
    function moveAvalon() {
    var x=xCoord("avalon");
    if (x <= W-125) {
    shiftIt("avalon",10,0);
    setTimeout("moveAvalon()",50);
    } else {
    swapImages();
    }

    }
    function swapImages() {
    showIt("kids");
    showIt("fiction");
    showIt("nfiction");
    setTimeout("swapIt('kids','fiction','nfiction')",2 000);
    }
    </script>
    </head>

    <body onLoad="placeObjects()">

    <div id="kids">
    <img src="kids.jpg" alt="" /><br />
    Sale this month on children's books
    </div>

    <div id="fiction">
    <img src="fiction.jpg" alt="" /><br />
    Fiction selection of the month
    </div>

    <div id="nfiction">
    <img src="nfiction.jpg" alt="" /><br />
    Non-fiction selection of the month
    </div>

    <div id="avalon">
    Avalon <span id="books">Books</span>
    </div>

    </body>
    </html>
    --------------scripts2.js--------------------------
    function placeIt(id, x, y) {
    var object=document.getElementById(id);
    object.style.left=x+"px";
    object.style.top=y+"px";
    }

    function shiftIt(id, dx, dy) {
    var object=document.getElementById(id);
    object.style.left=parseInt(object.style.left)+dx+" px";
    object.style.top=parseInt(object.style.top)+dy+"px ";
    }

    function xCoord(id) {
    object=document.getElementById(id);
    xc=parseInt(object.style.left);
    return xc;
    }

    function showIt(id) {
    var object=document.getElementById(id);
    object.style.visibility="visible";
    }

    function winWidth() {
    if (window.innerWidth) return window.innerWidth;
    else if (document.documentElement) return document.documentElement.offsetWidth;
    else if (document.body.clientWidth) return document.body.clientWidth;
    }

    function winHeight() {
    if (window.innerHeight) return window.innerHeight;
    else if (document.documentElement) return document.documentElement.offsetHeight;
    else if (document.body.clientHeight) return document.body.clientHeight;
    }


    function setZ(id, z) {
    var object=document.getElementById(id);
    object.style.zIndex=z;
    }


    function swapIt(id1, id2, id3) {
    var object1=document.getElementById(id1);
    var object2=document.getElementById(id2);
    var object3=document.getElementById(id3);

    var z1=object1.style.zIndex;
    var z2=object2.style.zIndex;
    var z3=object3.style.zIndex;

    object1.style.zIndex=z3;
    object2.style.zIndex=z1;
    object3.style.zIndex=z2;
    }

    ___________________________________
    christmas gift Audi A4 Clutch

  2. #2
    Join Date
    Oct 2002
    Location
    Baghdad, Iraq
    Posts
    697
    It looks like you're not keeping the timer alive. You either need to use setInterval instead of setTimeout or call setTimeout from the function that does the swap. Note that moveAvalon calls setTimeout from within itself which is why it keeps working.

    If that's not the problem, I'd have to see the actual web page live. It would also help if you mentioned which browser you're using.

Posting Permissions

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