Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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; 06-20-2002 at 09:28 AM.
    I am here but you are there...there is no point to this story but i bet you kept reading it anyway

  • #2
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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; 06-20-2002 at 05:27 AM.
    I am here but you are there...there is no point to this story but i bet you kept reading it anyway

  • #3
    New to the CF scene
    Join Date
    Jun 2002
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •