Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 17

Thread: random image

  1. #1
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times
    hey all,

    I'm comming on and doing alrite reguards learning the ways of function, variables, arrays, and properties of this and that etc.. but i'm confused with creating a random image script..

    Below is all I've come up with as in it's basically just an array but i need the math to make it loada random image.. i guess its something like this.. x<3 meaning it loops no higher than 3 lol i dunno can you help

    Code:
    <SCRIPT language="JavaScript">
    <!--
    function image_change()
    {
    var image= new Array(3)
    image[0]="1.jpg";
    image[1]="2.jpg";
    image[2]="3.jpg";
    var x=0; 
    for (x=0; x<3; x++) 
    {
    Dream like you'll live forever. Live like you're gonna die 2morrow!

  2.  

  3. #2
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    Code:
    <html>
    <head>
    <title>Random Image Generator</title>
    <script type="text/javascript">
     var bodyImg, pics = new Array();
    
    function init() {
     bodyImg = document.getElementById('pic');
     pics[0] = null;
     for (x=1; x<4; x++) { // pre loads imgs 1, 2, 3
      pics[x] = new Image();
      pics[x].src = x + ".jpg";
     }
    }
    
    function changeIt() {
     rnd = Math.ceil(Math.random()*3); // creates random number (0 - 2.9) & rounds it up
     bodyImg.src = pics[rnd].src;
    }
    </script>
    </head>
    
    <body onload="init()">
    <img src="http://www.skrlin.com/other/pics/dragon/dragon.jpg" height="415" width="280" id="pic" /><BR />
    <input type="button" value="Generate random" onClick="changeIt()" />
    </body>
    </html>
    In action
    - Brian

  4. #3
    Senior Member
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    735
    Member #
    1935
    kirman, you only have half of a script there. The following code will just cause an error.
    Code:
    for (x=0; x<3; x++) 
    {
    is the start of a loop. You actually have to put some statements within the start "{" and end "}" of the loop.

  5. #4
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times
    me need help with it
    Dream like you'll live forever. Live like you're gonna die 2morrow!

  6. #5
    Senior Member
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    735
    Member #
    1935
    skrlins code should work fine.. Have u tested it out yet??

    just create 3 pics (1.jpg, 2.jpg, 3.jpg) and copy and paste skrlins code into a page.

  7. #6
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times
    { // pre loads imgs 1, 2, 3

    whats that bit for?


    and this bit

    // creates random number (0 - 2.9) & rounds it up

    is he just describing wot it does?
    Dream like you'll live forever. Live like you're gonna die 2morrow!

  8. #7
    Senior Member
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    735
    Member #
    1935
    they are just javascript comments. // signals the start of a comment which will be completely ignored by js..

  9. #8
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    Originally posted by kirman
    { // pre loads imgs 1, 2, 3

    whats that bit for?


    and this bit

    // creates random number (0 - 2.9) & rounds it up

    is he just describing wot it does?
    // pre loads imgs 1, 2, 3 is describing what the for loop is doing.

    The for loop is basically creating an image for x = 1, x = 2, x = 3 and storing the source into the browser's temporary cache so that when the picture is displayed, it doesn't have to load at the time of display. Thus the term "pre-load"
    - Brian

  10. #9
    Senior Member kirman's Avatar
    Join Date
    May 2003
    Location
    UK England
    Posts
    765
    Member #
    1499
    Liked
    2 times
    sorted wot if i want to use more images wot do i change ?

    o and i dont want to use the button to change the image ermm can i remove it and use the browser on refresh to reload it ?
    Dream like you'll live forever. Live like you're gonna die 2morrow!

  11. #10
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    You would want to change:

    Code:
     for (x=1; x<4; x++) { 
      pics[x] = new Image();
      pics[x].src = x + ".jpg";
     }
    The difference between these two numbers is the total number of images that you are preloading, so if you wanted to preload 8 images, you would use [minicode]x=1; x<9[/minicode] which would preload images named "1.jpg", "2.jpg", "3.jpg", "4.jpg" and so forth up to "8.jpg"
    AND to match that you would want to change:

    Code:
    function changeIt() {
     rnd = Math.ceil(Math.random()*3);
     bodyImg.src = pics[rnd].src;
    }
    Using the same example (8 images) you would change it to [minicode]Math.random()*8[/minicode]


    And to make it display the image on page load, you would want to omit this line:
    [minicode]<input type="button" value="Generate random" onClick="changeIt()" />[/minicode]

    and add the line in bold here:

    Code:
    function init() {
     bodyImg = document.getElementById('pic');
     pics[0] = null;
     for (x=1; x<9; x++) { // pre loads imgs 1 - 9
      pics[x] = new Image();
      pics[x].src = x + ".jpg";
     }
     changeIt();
    }
    
    function changeIt() {
     rnd = Math.ceil(Math.random()*8); // creates random number (0 - 7.9) & rounds it up
     bodyImg.src = pics[rnd].src;
    }
    </script>
    And that would set it up to load a random image every time the page loads.
    - Brian


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:21 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com