Javascript Picturebox Array
Javascript Picturebox Array
Code:
<html>
<head>
<title>Javascript With Pictures waqeeh ul hasan</title>
<script>
var description = new Array("Picture 1", "Picture 2", "Picture 3", "Picture 4");
var pictures = new Array(3);
var counter = 0;
function initialize(){
// sets up the array with some startin values
// Andy Harris
pictures[0] = new Image(50, 50);
pictures[0].src = "images/1.jpg";
pictures[1] = new Image(50, 50);
pictures[1].src = "images/2.jpg";
pictures[2] = new Image(50, 50);
pictures[2].src = "images/3.jpg";
pictures[3] = new Image(50, 50);
pictures[3].src = "images/1.jpg";
pictures[4] = new Image(50, 50);
pictures[4].src = "images/2.jpg";
} // end initialize
function upDate(){
//increments the counter and shows the next description
counter++;
if (counter > 4){
counter = 0;
} // end if
document.imgDisplay.src = pictures[counter].src;
document.myForm.txtDescription.value = description[counter];
} // end upDate
</script>
</head>
<body onLoad = "initialize()">
<center>
<h1>Javascript With Pictures<hr></h1>
<form name = "myForm">
<img src = "images/1.jpg"
name = "imgDisplay"
height = 300
width = 300>
<br>
<input type = "text"
name = "txtDescription"
value = " Picture 01">
<br>
<input type = "button"
value = "Next"
onClick = "upDate()">
</form>
</center>
<hr>
</body>
</html>
Screen Shot:
Code:
<html>
<head>
<title>Javascript With Pictures waqeeh ul hasan</title>
<script>
var description = new Array("Picture 1", "Picture 2", "Picture 3", "Picture 4");
var pictures = new Array(3);
var counter = 0;
function initialize(){
// sets up the array with some startin values
// Andy Harris
pictures[0] = new Image(50, 50);
pictures[0].src = "images/1.jpg";
pictures[1] = new Image(50, 50);
pictures[1].src = "images/2.jpg";
pictures[2] = new Image(50, 50);
pictures[2].src = "images/3.jpg";
pictures[3] = new Image(50, 50);
pictures[3].src = "images/1.jpg";
pictures[4] = new Image(50, 50);
pictures[4].src = "images/2.jpg";
} // end initialize
function upDate(){
//increments the counter and shows the next description
counter++;
if (counter > 4){
counter = 0;
} // end if
document.imgDisplay.src = pictures[counter].src;
document.myForm.txtDescription.value = description[counter];
} // end upDate
</script>
</head>
<body onLoad = "initialize()">
<center>
<h1>Javascript With Pictures<hr></h1>
<form name = "myForm">
<img src = "images/1.jpg"
name = "imgDisplay"
height = 300
width = 300>
<br>
<input type = "text"
name = "txtDescription"
value = " Picture 01">
<br>
<input type = "button"
value = "Next"
onClick = "upDate()">
</form>
</center>
<hr>
</body>
</html>
Screen Shot:
No comments