RE: Need help with Netscape DOM - fixed that, added another problem

by Jim Coffield <coffield(at)cet.edu>

 Date:  Wed, 31 May 2000 17:10:11 -0500
 To:  Wise Lisa M Civ 355 TRS/RTS <Lisa.Wise(at)dm.af.mil>,
hwg-languages(at)hwg.org
 In-Reply-To:  af
  todo: View Thread, Original
This is sort of a sloppy fix but it works. There are probably better ways
to do this without duplicating the functions such as passing additional
arguments with the function calls thereby allowing the rollovers to work
once a button had appeared rather than none of them working until all of
the buttons are visible. If I have time his weekend I'll play around with
it some.

Jim

First: Duplicate the image swap functions with one set for the initial
navLoad and the other set for rollovers.

Second: In the functions for the rollovers, place an additional condition
to check for a variable value (flag). If 0 don't do rollover else do
rollover.

Third: Declare the variable in the javascript code and set its value to 0

Fourth: At the end of the sequence control function in api.js,  add an else
statement to set the value of the variable to 1 when the nav buttons have
been loaded.

Fifth: In the navLoad.js file change the functions to NavimgDn and NavimgUp
(or what ever name you decide to use).

Example:

>(api.js)

function SeqController(SeqNumber) {
	// The if checks to see if there is anything left to do.
    if (Time[SeqNumber] <= Seq[SeqNumber].length - 1) {
    // If there is then increment the TIME
      Time[SeqNumber]++;

        if (Seq[SeqNumber][Time[SeqNumber]] != null){
      	// If there is a function name stored at Seq[Seq][Time] then do it.

          eval(Seq[SeqNumber][Time[SeqNumber]]);
        }
        setTimeout('SeqController(' + SeqNumber + ')', 100); // Delay
1/10th of a second
    }
    else {
      myFlag=1;
    }
}

>
>//rollover functions
>
>function imgDn(imgName) {
>
> 	if (document.images && myFlag==1) {
>    	document.images[imgName].src = eval(imgName + "dn.src");
>
>	}
>}
>
>function imgUp(imgName) {
>
> 	if (document.images && myFlag==1) {
>    	document.images[imgName].src = eval(imgName + "up.src");
>   }
>}

>function NavimgDn(imgName) {
>
> 	if (document.images) {
>    	document.images[imgName].src = eval(imgName + "dn.src");
>
>	}
>}
>
>function NavimgUp(imgName) {
>
> 	if (document.images) {
>    	document.images[imgName].src = eval(imgName + "up.src");
>   }
>}
>
>//end rollover functions

>(navLoad.js)
>
>Time = new Array();
>Seq = new Array();
>Seq[0] = new Array();
>Seq[0][1]="begin();";
>Seq[0][10]="NavimgDn('img1');";
>Seq[0][14]="NavimgUp('img1');";
>Seq[0][15]="NavimgDn('img2');";
>Seq[0][19]="NavimgUp('img2');";
>Seq[0][20]="NavimgDn('img3');";
>Seq[0][24]="NavimgUp('img3');";
>Seq[0][25]="NavimgDn('img4');";
>Seq[0][29]="NavimgUp('img4');";
>Seq[0][30]="NavimgDn('img5');";
>Seq[0][34]="NavimgUp('img5');";
>


>(index.shtml)

<script language="javascript">

var myFlag=0;

</script>

>Jim,
>BIG HUGE THANK YOU! That did the trick, I put a blank gif there initially,
>then swapped them with the load function.
>
>One problem, though, since the blank gifs have rollover functions, if
>someone accidentally passes over them before the buttons are loaded, the
>mouseover images show immediately - obviously defeating the "cool" look of
>the sequential loading.  Can anyone think of a way to get around that?
>
>***********************************************************
>Lisa Wise
>www.declareit.com (It's almost ready for its debut!)
>**********************************************************
>

James E. Coffield, Ph.D.
Research Associate
Center for Educational Technologies/
NASA Classroom of the Future
Wheeling Jesuit University
316 Washington Avenue
Wheeling, WV  26003
Phone (304) 243-2469      Fax: 304-243-2497
WWW address:  http://www.cet.edu/
email: coffield(at)cet.edu

HWG: hwg-languages mailing list archives, maintained by Webmasters @ IWA