Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2003
    Location
    Seattle
    Posts
    137
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Image problems in JS

    Hi all long time since I've been here, but you have always been so helpful!!

    So here goes: here is the site address:
    http://www.oxygentrina.com/Aromatherapy.html

    here is the code:

    <!--Copy and paste into your HTML just above the close </BODY> tag. -->

    <script language="JavaScript1.2">
    <!-- Begin
    /*
    Float Up Drifter - JavaScript
    Visit http://www.rainbow.arch.scriptmania....pts/index.html
    for this script and many more
    */
    // Configure below - change number of images to render
    var no = 16;
    // Configure speed below
    var speed = 15; // The smaller the number, the faster the movement

    var floatr = new Array();
    // Your image location
    floatr[1] = "balloon1.gif"
    floatr[1] = "balloon1.gif"
    floatr[2] = "balloon2.gif"
    floatr[2] = "balloon2.gif"
    floatr[3] = "balloon3.gif"
    floatr[3] = "balloon3.gif"
    floatr[7] = "balloon7.gif"
    floatr[7] = "balloon7.gif"

    var floatr = new Array();
    floatr[1] = "balloon1.gif"
    floatr[1] = "balloon1.gif"
    floatr[2] = "balloon2.gif"
    floatr[2] = "balloon2.gif"
    floatr[3] = "balloon3.gif"
    floatr[3] = "balloon3.gif"
    floatr[7] = "balloon7.gif"
    floatr[7] = "balloon7.gif"


    var ns4up = (document.layers) ? 1 : 0; // browser sniffer
    var ie4up = (document.all) ? 1 : 0;
    var ns6up = (document.getElementById&&!document.all) ? 1 : 0;
    var dx, xp, yp; // coordinate and position variables
    var am, stx, sty; // amplitude and step variables
    var i, doc_width = 800, doc_height = 1800;

    if (ns4up||ns6up) {
    doc_width = self.innerWidth;
    doc_height = self.innerHeight;
    } else if (ie4up) {
    doc_width = document.body.clientWidth;
    doc_height = document.body.clientHeight;
    }

    dx = new Array(50);
    xp = new Array(10);
    yp = new Array(500);
    am = new Array();
    stx = new Array();
    sty = new Array();
    j = 0;

    for (i = 0; i < no; ++ i) {
    dx[i] = 0; // set coordinate variables
    xp[i] = Math.random()*(doc_width-50); // set position variables
    yp[i] = Math.random()*doc_height;
    am[i] = Math.random()*20; // set amplitude variables
    stx[i] = 0.02 + Math.random()/10; // set step variables
    sty[i] = 0.7 + Math.random(); // set step variables
    if (ns4up) { // set layers
    if (i == 0) {
    document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ floatr[j] + "\" border=\"0\"></layer>");
    } else {
    document.write("<layer name=\"dot"+ i +"\" left=\"15\" top=\"15\" visibility=\"show\"><img src=\""+ floatr[j] + "\" border=\"0\"></layer>");
    } } else if (ie4up||ns6up) { if (i == 0)
    {
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + floatr[j] + "\" border=\"0\"></div>");
    } else {
    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"VISIBILITY: visible; TOP: 15px; LEFT: 15px; width:1;\"><img src=\"" + floatr[j] + "\" border=\"0\"></div>");
    }
    }
    if (j == (floatr.length-1)) { j = 0; } else { j += 1; }
    }

    function floatrNS() { // Netscape main animation function
    for (i = 0; i < no; ++ i) { // iterate for every dot
    yp[i] -= sty[i]; if (yp[i] < -50) {
    xp[i] = Math.random()*(doc_width-am[i]-30);
    yp[i] = doc_height;
    stx[i] = 0.02 + Math.random()/10;
    sty[i] = 0.7 + Math.random();
    doc_width = self.innerWidth;
    doc_height = self.innerHeight; }
    dx[i] += stx[i];
    document.layers["dot"+i].top = yp[i]+pageYOffset;
    document.layers["dot"+i].left = xp[i] +
    am[i]*Math.sin(dx[i]);
    }
    setTimeout("floatrNS()", speed);
    }

    function floatrIE_NS6() { // IE main animation function
    for (i = 0; i < no; ++ i) { // iterate for every dot
    yp[i] -= sty[i];
    if (yp[i] < -50) {
    xp[i] = Math.random()*(doc_width-am[i]-30);
    yp[i] = doc_height;
    stx[i] = 0.02 + Math.random()/10;
    sty[i] = 0.7 + Math.random();
    doc_width = ns6up?window.innerWidth-5:document.body.clientWidth;
    doc_height = ns6up?window.innerHeight-5:document.body.clientHeight;
    }
    dx[i] += stx[i];
    if (ie4up){
    document.all["dot"+i].style.pixelTop = yp[i]+document.body.scrollTop;
    document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);
    }
    else if (ns6up){
    document.getElementById("dot"+i).style.top=yp[i]+pageYOffset;
    document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i]);
    }
    }
    setTimeout("floatrIE_NS6()", speed);
    }

    if (ns4up) {
    floatrNS();
    } else if (ie4up||ns6up) {
    floatrIE_NS6();
    }
    // End -->
    </script>


    I am not sure why I get some of the balloons, and some are x red box images. Any help would be appreciated.
    thanks so much in advance.

    Rhonda
    Dreams on the Fly
    http://www.dreamsonthefly.com

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    As you have only 7 balloons, change
    var no = 16;
    to var no = 7; in your script
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Nov 2003
    Location
    Seattle
    Posts
    137
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay I changed it, but it's still happening.
    Dreams on the Fly
    http://www.dreamsonthefly.com

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You don't seem to understand how javascript arrays work. You have this in your code
    Code:
        // Configure below - change number of images to render
    var no = 7; 
        // Configure speed below
    var speed = 15;   // The smaller the number, the faster the movement
    
    var floatr = new Array();
       //  Your image location
    floatr[1] = "balloon1.gif"
    floatr[1] = "balloon1.gif"
    floatr[2] = "balloon2.gif"
    floatr[2] = "balloon2.gif"
    floatr[3] = "balloon3.gif"
    floatr[3] = "balloon3.gif"
    floatr[7] = "balloon7.gif"
    floatr[7] = "balloon7.gif"
    
    var floatr = new Array();
    floatr[1] = "balloon1.gif"
    floatr[1] = "balloon1.gif"
    floatr[2] = "balloon2.gif"
    floatr[2] = "balloon2.gif"
    floatr[3] = "balloon3.gif"
    floatr[3] = "balloon3.gif"
    floatr[7] = "balloon7.gif"
    floatr[7] = "balloon7.gif"
    Change it to this
    Code:
    // Configure below - change number of images to render
    var no = 8; 
        // Configure speed below
    var speed = 15;   // The smaller the number, the faster the movement
    
    var floatr = new Array();
    floatr[0] = "balloon1.gif"
    floatr[1] = "balloon1.gif"
    floatr[2] = "balloon2.gif"
    floatr[3] = "balloon2.gif"
    floatr[4] = "balloon3.gif"
    floatr[5] = "balloon3.gif"
    floatr[6] = "balloon7.gif"
    floatr[7] = "balloon7.gif"
    Arrays start at 0 and you weren't supposed to change the number in floatr[n] to match the number on the file name.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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