Scrolling image (javascript needs debuged HELP) [Archive]

View Full Version : Scrolling image (javascript needs debuged HELP)

cat2phat

06-20-2002, 04:02 AM

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(){
;
}

cat2phat

06-20-2002, 04:10 AM

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"></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>

cat2phat

06-20-2002, 05:48 PM

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"></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(){
;
}