PDA

View Full Version : Multiple Random image sets onload



jasonbender
09-19-2008, 10:24 PM
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.

http://www.hostbyweb.net/val/jason/layout.jpg

rangana
09-20-2008, 02:04 AM
If set4 will be use to show the images during load, how will the other sets be useful?

jasonbender
09-21-2008, 09:33 PM
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


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.

rangana
09-22-2008, 02:07 PM
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.

jasonbender
09-24-2008, 10:11 PM
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.

rangana
09-25-2008, 12:26 AM
Here's a basic example to keep you going:


<!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).