Create a simple Album using Java script

When ever I saw fancy picture albums in I always wonder how I can create a simple album using java script. Well when I learned javascript I found it quite simple. You need to know very basic CSS, JAVA script and a bit HTML. So lets learn how to make a very simple album using Java Script. We will learn it in steps.

1. Create a file in folder. Name it to say 'Album'. Now Create a folder in it and name it say 'images'.
2. Now create a text file and rename it to 'album.html'
3. Now open album.html in you favorite text editor. I prefer using Nodepad++ . you can download it from http://sourceforge.net/projects/notepad-plus/files/
4. Now we will write the code. First add html and head tag.
   
5. Add a title tag. eg- <>Album< /title >
6. Now before the < /head > you have to add the script required.
7. Add the folllowing script. We will under stand the script in details later. -

< type="text/javascript">
var count=1; //counter
var IMG_NO=8; // set no of images
var imgUrl = new Array(); // image urls array

function init(){

// set image urls
imgUrl[1]="images/img1.jpg"; // your file name
imgUrl[2]="images/img2.jpg";
// and so on for all images ...

// call slideShow function
slideShow();
}

function slideShow() // function to show Images
{

var d=document.getElementById("img1");
d.src=imgUrl[count];
count++;
if(count > IMG_NO)
count=1;
// call the same function in 2 sec
setTimeout("slideShow()",2000);
}

< /script >

• Now we have to make a area in the page to show image. So we will create a div and in side that we will have to write a <> tag with id='img1'.
  
• ID is just like a unique name to a object in the web page. Using this you can access the that element using java script function document.getElementByID(' id');.
• Note that in the javascript above we are calling the document.getElementByID(' img1'); .
  
• In my example see how I have written inside body tag-
  

< onload="init()">

< class="div1">
< class="img1" id="img1">
< /div >

< /body >

• I have defined a class if the div as "div1". and a class for the img as "img1".

< type="text/css">
body{
background:#CCCCCC;
}
.div1{
top:70px;
left:202px;
position:absolute;
height:400px;
width:600px;
background:#333333;
border-color:#00FFFF;
border-bottom-width:thick;
}
.img1{
top:5px;
left:5px;
position:absolute;
height:390px;
width:590px;
}

< /style >

• You must put this CSS before the < /head >
• Its allmost done now.
  
• See the demo at this page http://www.riteshranjan007.byethost7.com/programs/album.html