Results 1 to 6 of 6

Thread: Multiple Random image sets onload

  1. #1
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Multiple Random image sets onload

    Hello all,

    I must say first I'm very new to javascript and I'm trying to pull off a kinda cool difficult effect... I think.

    Let me also say I have found lots of information on loading 1 random image on page load. But my situation is somewhat unique. I'm trying to have 3 different image locations all update in sync.

    I have a total of 4 sets of 3 images (main image, left column image, right column image) and I want a different SET onload.

    My images are named as follows:

    SET1 =image1a.jpg, image1b.jpg, image1c.jpg
    SET2 =image2a.jpg, image2b.jpg, image2c.jpg
    SET3 =image3a.jpg, image3b.jpg, image3c.jpg
    SET4 =image4a.jpg, image4b.jpg, image4c.jpg

    I know I'm going to need to load these images into an array or possibly maybe 4 different arrays. And I know I'm going to need id(s) for my image location(s). (mainimage, leftimage, rightimage) But I have no idea how to bring this together.

    I have attached an image layout to help display what I'm trying to accomplish.


  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    If set4 will be use to show the images during load, how will the other sets be useful?
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    The other sets are for loading a different set "onload" at random.

    This way there are 4 unique sets of 3 images. What I want is to create 4 different looks for the page. What has me confused is how to create the conditional write statement.

    1. build 4 arrays to hold the images
    2. compute random number to arrive at which array to select
    3. Once selected then follow this logic

    Code:
    If [array1] then load image Set1 : 
    
    place image1a.jpg in "mainimage" location on page place image1b.jpg in "leftimage" location on page place image1c.jpg in "rightimage" location on page
    else if [array2] then load image Set2 :
    place image2a.jpg in "mainimage" location on page place image2b.jpg in "leftimage" location on page place image2c.jpg in "rightimage" location on page
    else if [array3]..... else if [array4].....
    I would be happy to post what I have so far it that would help.
    Last edited by jasonbender; 09-21-2008 at 09:42 PM.

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    I'm confused on the fact that you are preparing 4 arrays for the three elements in your page.

    So, the first array is for the header (the upper one).
    The second array is for the left part of your page,
    The third array is for the right part of your page.

    How will the fourth array be used? Is it for the loading alone?

    ...How will the three sets of array do their functions then?

    These makes me confused.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  5. #5
    Join Date
    Sep 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    What I was thinking was to create 4 array's because I have 4 display SETS.

    A set is made up of 3 images (a header, leftpart, rightpart)
    I have a total of 4 display SETS (12 images in ALL, 4 SETS of 3)

    If I use a random number generator to come up with a number 0-3 then display that specific array of images on the page. So lets say the calculation comes up with 2. Then I want to load Array[2] into the page at the 3 specified locations.

    I hope this helps make it less confusing.

  6. #6
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    Here's a basic example to keep you going:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    *{margin:0px;padding:0px;}
    #wrap{width:950px;margin:10px auto;border:3px double #555;
    height:702px;
    }
    h1{color:#930;}
    #header{height:250px;border-bottom:5px solid #555;
    text-align:center;
    }
    img{height:200px;width:300px;}
    #content{height:450px;}
    #left{
    float:left;
    width:300px;
    height:100%;
    border-right:1px solid #555;
    padding:0px 10px;
    }
    #right{
    float:right;
    width:300px;
    height:100%;
    border-left:1px solid #555;
    padding:0px 10px;
    }
    </style>
    <script type="text/javascript">
    window.onload=function(){
    var ArrImg=[
    ['Picture1','Picture2','Picture3'], // First set of images
    ['Picture4','Picture5','Picture6'], // Second set of images
    ['Picture7','Picture8','Picture9'], // Third set of images
    ['Picture10','Picture11','Picture12'] // Fourth set of images
    ], // Place them in this array
    base='http://rangana.moonylist.com/images/', // Base URL of the images. Just for testing
    frmt='.jpg', // Format of the 12 images. Mine is jpeg.
    genRand=Math.floor(Math.random()*ArrImg.length), // Generate random number from 0 to ArrImg's length
    place1=document.getElementById('header'), // ID of the element where the first image on the array will be appended
    place2=document.getElementById('left'), // ID of the element where the second image on the array will be appended
    place3=document.getElementById('right'), // ID of the element where the third image on the array will be appended
    cImg1=document.createElement('img'), // Create first image element
    cImg2=document.createElement('img'), // Create second image element
    cImg3=document.createElement('img'); // Create third image element
    alert(base+ArrImg[genRand][0]+'.jpg');
    cImg1.setAttribute('src',base+ArrImg[genRand][0]+frmt);
    cImg1.setAttribute('alt',ArrImg[genRand][0]);
    document.getElementById('header').appendChild(cImg1); // Append the first img.
    cImg2.setAttribute('src',base+ArrImg[genRand][1]+frmt);
    cImg2.setAttribute('alt',ArrImg[genRand][1]); 
    document.getElementById('left').appendChild(cImg2); // Append the first img
    cImg3.setAttribute('src',base+ArrImg[genRand][2]+frmt);
    cImg3.setAttribute('alt',ArrImg[genRand][2]);
    document.getElementById('right').appendChild(cImg3); // Append the first img.
    }
    </script>
    </head>
    <body>
    <div id="wrap">
    	<div id="header">
    		<h1>This is for the header part</h1>
    	</div>
    	<div id="content">
    		<div id="left">
    			<h1>This is for the left part</h1>
    		</div>
    		<div id="right">
    			<h1>This is for the right part</h1>
    		</div>
    		
    	<h1>Main content here</h1>
    	</div>
    </div>
    </body>
    </html>
    P.S., I don't have an image for the fourth set (Picture10 - Picture12).
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

Bookmarks

Posting Permissions

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