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
    Put
    Put is offline
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Please help me converting into variable names, or help me out any way you can...

    Since I'm very new to JavaScript, I don't even know if this is possible, but I'll state my problem...

    I am to create an animated piece of lego without using an animated gif. Well, it's not really animated, but I want to loop through a number of pictures quickly to make it look like the piece of lego rotates.

    I got it working, kind of, but the solution is far from acceptable.

    I want the script to look simple, something like...



    <script type="text/javascript">

    for(i=0; i <= 11; i++)
    {
    // (bl+i) does of course not work. I mean that if i is 0, (bl+i) should be bl0.
    (bl+i) = new Image();

    if(i<10)
    (bl+i).src = ("Bilder/Legobit"+"000"+i+"."+"bmp");
    else
    (bl+i).src = ("Bilder/Legobit"+"00"+i+"."+"bmp");
    }

    function snurra(image, color, count) {

    image.src=(color+count).src;
    count=count+1;

    if(count==12)
    {
    // Stop.
    image.src=(color+0).src;
    }
    else
    setTimeout('snurra(image, color, count)',20);
    }

    }

    </script>

    ...

    <img src="Bilder/Legobit0000.bmp" id="blabit" alt="Legobit" onmouseover="snurra(blabit, bl, 0)" />

    ...

    (I hope it's comprehensible. I will use png instead of bmp when it's finished.)



    ... but since I'm not good at JavaScript I had to script it really clumsy, which can be seen here:

    http://www.student.itn.liu.se/~chral647/Lego.html [the test site]

    http://www.student.itn.liu.se/~chral647/Lego.txt [the code]

    http://www.student.itn.liu.se/~chral647/Lego.zip [the html with images]



    If the links don't work, try downloading from...

    http://www.student.itn.liu.se/~chral647/



    Please, help me. I greatly appreciate any help.



    // Put

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You need the basics of javascript to code correctely.

    1. all the page's elements are appended to the document, so that they are to be refered as

    document.myobject

    1a. In your particular case, when the event is trigered from the same element which must be manipulate, you may use the self reference this

    2. There are a couple of different methods to refere an elements, upon name, id, tagName or index in a collection. There are 2 different way of coding, both accepted by the modern browsers, the classical javascript 1.0 and the DOM. If you tried to code in classical way, let's see: Pictures are to be found as

    document.images[name_or_index]

    That means you may manipulate objects in a single reference using square brackets notation.

    3. setTimeout() and setInterval() have as first argument a string. That means you have to use concatenation when you need to pass some parameters. It is important what kind of parameter you send.

    setTimeout('myfunction('+mynumber+')',delay)
    setTimeout('myfunction("'+mystring+'")',delay)

    4. If your elements have their identification marks (name, ids...) build in a indexed way, there is no need to pre-build an array.

    5 To simplify coding you may use ternary conditioner
    var myvariabe=(condition)?value1:value2;
    is equivalet of
    if(condition){var myvariable=value1}
    else{var myvariable=value2}

    6. There is no use to set the delay time as 10 miliseconds. Anyway the respond time of an average CPU is no lower than 70-80 miliseconds

    7. Use clearTimeout() to stop a setTimeout()

    Let's see what we have got till now
    PHP Code:
    <script type="text/javascript">
    var 
    i=0;
    function 
    snurra(n) {
    if(
    i<12){
    var 
    q=(i<10)?'0'+i:i;
    document.images[n].src='Bilder/Legobit000'+q+'.bmp';
    i++;
    var 
    set setTimeout('snurra("'+n+'")',80);
    }
    else{
    i=0;
    document.images[n].src='Bilder/Legobit0000'+i+'.bmp';
    clearTimeout(set)
    }
    }
    </script>
    ...
    <img src="Bilder/Legobit0000.bmp" id="blabit" alt="Legobit" onmouseover="snurra(this.name)" />
    ... 
    Last edited by Kor; 11-24-2005 at 11:31 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Put
    Put is offline
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your effort.

    I want to point out that the purpose of the first part is to load all images before they're actually used, not after the animation has started.

    Anyway, I'm delighted to see a reply, but where do I go from now? How can the script be completed?

    I think this could be useful for others as well.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    I want to point out that the purpose of the first part is to load all images before they're actually used
    the code just try to do that, but there is no guarantee for such a preloader, as javascript can not actually check whether an image was really loaded in cache or not. And some pictures might be interlaced, so that the loading process is a continous one...

    I take those preloader codes ussles, so that I never use them.

    Speaking about pictures... I advice you not to use bitmap (bmp) files, as they are not optimized, so that they are "heavy". Normally, on web pages are to be used optimized pictures in format GIF, JPG (JPEG) and PNG.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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