CODEWITHSUNDEEP
javascriptjquery
Sham
Sham

Reputation: 424

Image not scrolling on mouse click

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

Answers (1)

mahmoud nezar sarhan
mahmoud nezar sarhan

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

Related Questions