Reputation: 424
I am learning this horizontal image scroll based on this tutorial
http://www.homeandlearn.co.uk/JS/javascript_image_scroller.html.
However neither the next image nor the previous image show up on click,but after the 6 clicks (5 images after the first image) the corresponding alert does pop up. I am new to java script . PLz help me where am I going wrong.(I am sure that I have put the correct path name for images as the first image comes up ,and the other images are listed below them)
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var p1=new Image();
var p2=new Image();
var p3=new Image();
var p4=new Image();
var p5=new Image();
var p6=new Image();
p1.src="page3.png";
p2.src="2.gif";
p3.src="3.gif";
p4.src="4.gif";
p5.src="5.gif";
p6.src="6.gif";
var imgArray=new Array(p1,p2,p3,p4,p5,p6);
var counter=0;
var end=5;
function scroll_backward(){
if (counter==0){
alert("start of pictures");
}
else {
counter--;
}
document.pic.src=imgArray[counter].src;
}
function scroll_forward () {
if(counter==end){
alert("No more pictures");
}
else{
counter++;
}
document.pic.src=imgArray[counter].src;
}
</script>
</head>
<body>
<TABLE width="500">
<TR>
<TD height="200" width="100">
<IMG SRC="scrollforward.gif" onClick="scroll_forward()">
</TD>
<TD height="300">
<IMG SRC="5.gif" name="pic1">
</TD>
<TD width="100">
<IMG SRC="scrollbackward.png" onClick="scroll_backward()">
</TD>
</TR>
</TABLE>
</body>
</html>
Upvotes: 0
Views: 98
Reputation: 756
<IMG name="pic"> not pic1
this code will absolutely work for you :)
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var p1=new Image();
var p2=new Image();
var p3=new Image();
var p4=new Image();
var p5=new Image();
var p6=new Image();
p1.src="page3.png";
p2.src="2.gif";
p3.src="3.gif";
p4.src="4.gif";
p5.src="5.gif";
p6.src="6.gif";
var imgArray=new Array(p1,p2,p3,p4,p5,p6);
var counter=0;
var end=5;
function scroll_backward(){
if (counter==0){
alert("start of pictures");
}
else {
counter--;
}
document.pic.src=imgArray[counter].src;
}
function scroll_forward () {
if(counter==end){
alert("No more pictures");
}
else{
counter++;
}
document.pic.src=imgArray[counter].src;
}
</script>
</head>
<body>
<TABLE width="500">
<TR>
<TD height="200" width="100">
<IMG SRC="scrollforward.gif" onClick="scroll_forward()">
</TD>
<TD height="300">
<IMG SRC="5.gif" name="pic1"> // **here is your problem >>> it was pic not pic1**
</TD>
<TD width="100">
<IMG SRC="scrollbackward.png" onClick="scroll_backward()">
</TD>
</TR>
</TABLE>
</body>
</html>
Upvotes: 1