Web Analytics Made Easy - StatCounter Scrolling image (javascript needs debuged HELP) - CodingForum

Announcement

Collapse
No announcement yet.

Scrolling image (javascript needs debuged HELP)

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Scrolling image (javascript needs debuged HELP)

    Alright heres what i am thinking. I hate just onMouseover --> change image. I want one mouse over change image several times, and make it look like the image is sliding in or out of something. Basically i have been reading the forums and got the idea of using a 2 dimensional array...and it works great. Now all i need to do is display it without it going crazy on me.

    Heres what i need help with. When you scroll over the link it changes to the next image or not at all. Try mouseovering it several times...freaks out on me. Where is the loop that is causing this that i am not catching?

    Try it at http://4.64.97.143/

    scroll to the bottom to see the link and image


    var base = "images/bg_"

    var typeOfimage = 0;
    var nextImage = 0;
    var picts = new Array(00,01,02,03,04,05,06);
    var imgArray = new Array('news','roster','records','links');

    //When definePic is called the number corresponding to the array element in imgArray is being sent in

    var imgSource = new Array(imgArray.length);

    for (var x = 0; x < imgArray.length; x++){
    imgSource[x] = new Array(picts.length);
    }

    var news = new Array();
    var roster = new Array();
    var records = new Array();
    var links = new Array();

    for (typeOfimage = 0; typeOfimage < imgArray.length; typeOfimage++){
    for (nextImage = 0; nextImage < picts.length; nextImage++){
    imgSource[typeOfimage][nextImage] = (base + imgArray[typeOfimage] + "_0" + picts[nextImage] + ".gif");
    document.write ("<BR> Preload of " + imgArray[typeOfimage] + "image #0" + picts[nextImage] + "<BR>" + imgSource[typeOfimage][nextImage]);
    }
    }
    nextImage = 1; //Get rid of first mouseover error with retract

    function retract(){
    if (nextImage > 0){
    nextImage--;
    //document.write(nextImage); //Check global variable
    displayImage(1);
    }
    else{ //Stop loop go to next function
    ;
    }
    }

    function slide(){
    if (nextImage < picts.length){
    nextImage++; //Increment global variable (image swaper)
    displayImage(0);
    }
    else{ //Stop loop go to next function
    ;
    }
    }

    //See imgArray to find typeOfpic
    function definePic(typeOfpic){
    typeOfimage = typeOfpic; //Set global variable (image type)
    }

    function displayImage(retractOrslide){
    if (typeOfimage != 4){ //First mouseover check
    //document.write(typeOfimage + " " + nextImage + " " + imgSource[typeOfimage][nextImage]); //Global variables check
    document.images['scrollMe'].src = imgSource[typeOfimage][nextImage];
    }

    if (retractOrslide == 1){
    setTimeout("retract()",15);
    }
    else if (retractOrslide == 0){
    setTimeout("slide()",15);
    }
    else{
    document.write("You have an Error");
    }
    }

    function pause(){
    ;
    }
    Last edited by cat2phat; Jun 20, 2002, 03:28 AM.
    I am here but you are there...there is no point to this story but i bet you kept reading it anyway
    Tags: None
  • #2
    Here is the index.html page that i am testing it with

    <html>
    <head>
    <title> Type_Document_Title_Here </title>
    <meta name="generator" content="Sausage Software HotDog Professional 6">
    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="scroll.js"><!--
    window.moveTo(0,0)
    window.resizeTo(screen.availWidth,screen.availHeight)
    //--></SCRIPT>
    </head>
    <body>
    <BR>
    <IMG SRC="images/bg_05_00.gif" NAME="scrollMe">
    <BR>
    <A HREF="news.html" onMouseOver='setTimeout("pause()",60); retract(); definePic("0"); slide(); return true' onMouseOut=''>Slide it</A>
    </body>
    </html>
    Last edited by cat2phat; Jun 19, 2002, 11:27 PM.
    I am here but you are there...there is no point to this story but i bet you kept reading it anyway

    Comment

    • #3
      I figured the problem out. I needed to have all the function run before the next one so i did a check with countOver and countOut. I also had to use mouseOver and mouseOut...which i didnt plan on in the beginning but it works out this way so. Finished code below.

      HTML FILE
      <html>
      <head>
      <title> Type_Document_Title_Here </title>
      <meta name="generator" content="Sausage Software HotDog Professional 6">
      <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript" SRC="scroll.js"><!--
      window.moveTo(0,0)
      window.resizeTo(screen.availWidth,screen.availHeight)
      //--></SCRIPT>
      </head>
      <body>
      <BR>
      <IMG SRC="images/bg_05_00.gif" NAME="scrollMe">
      <BR>
      <A HREF="news.html" onMouseOver='setTimeout("pause()",60);setTimeout("pause()",60);definePic("0"); slide();' onMouseOut='retract();'>Slide it</A>
      </body>
      </html>

      SROLL.JS FILE
      var base = "images/bg_"

      var countOver = 0; //For loop counter to escape out of loops
      var countOut = 6; //Same
      //These variables have to be here so in case they mouseOver and mouseOut to fast
      //These variables will attempt to escape out of a forever function loop call
      var typeOfimage = 0;
      var nextImage = 0;
      var picts = new Array(00,01,02,03,04,05,06);
      var imgArray = new Array('news','roster','records','links');
      var imgSource = new Array(imgArray.length);

      for (var x = 0; x < imgArray.length; x++){
      imgSource[x] = new Array(picts.length);
      }

      var news = new Array();
      var roster = new Array();
      var records = new Array();
      var links = new Array();

      for (typeOfimage = 0; typeOfimage < imgArray.length; typeOfimage++){
      for (nextImage = 0; nextImage < picts.length; nextImage++){
      imgSource[typeOfimage][nextImage] = (base + imgArray[typeOfimage] + "_0" + picts[nextImage] + ".gif");
      document.write ("<BR> Preload of " + imgArray[typeOfimage] + "image #0" + picts[nextImage] + "<BR>" + imgSource[typeOfimage][nextImage]);
      }
      }
      nextImage = 1; //Get rid of first mouseover error with retract

      function retract(){
      if (nextImage > 0 && countOver == 6){
      nextImage--;
      countOut++;
      //document.write(nextImage); //Check global variable
      if (countOut == 6){
      nextImage = 0;
      countOver = 0;
      }
      displayImage(1);
      }
      else{ //Stop loop go to next function
      ;
      }
      }

      function slide(){
      if (nextImage < (picts.length) && countOut == 6){
      nextImage++; //Increment global variable (image swaper)
      countOver++;
      if (countOver == 6){
      nextImage = picts.length - 1;
      countOut = 0;
      }
      displayImage(0);
      }
      else{ //Stop loop go to next function
      //document.write(countOut + " " + countOver + " " + nextImage);
      //document.write(imgSource[typeOfimage][nextImage]);
      ;
      }
      }

      function definePic(typeOfpic){
      typeOfimage = typeOfpic; //Set global variable (image type)
      }

      function displayImage(retractOrslide){
      if (typeOfimage != 4){ //First mouseover check
      //document.write(typeOfimage + " " + nextImage + " " + imgSource[typeOfimage][nextImage]); //Global variables check
      document.images['scrollMe'].src = imgSource[typeOfimage][nextImage];
      }

      if (retractOrslide == 1){
      setTimeout("retract()",15);
      }
      else if (retractOrslide == 0){
      setTimeout("slide()",15);
      }
      else{
      document.write("You have an Error");
      }
      }

      function pause(){
      ;
      }
      I am here but you are there...there is no point to this story but i bet you kept reading it anyway

      Comment

      Previous template Next
      Working...
      X