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).
Multiple Random image sets onload
Reply With Quote
Bookmarks