RobLog

Web Design in the World of .NET (C# and VB.NET, XML, and Javascript). I learned how to program from TheDailyWTF.com!
posts - 140, comments - 109, trackbacks - 5

My Links

News

Main Site Cert Corner Goals About Me

Article Categories

Archives

Post Categories

Image Galleries

.NET

Personal

WOW


BUTTON IMAGE PRELOADER (JS)

/*

      // BUTTON IMAGE PRELOADER (For buttons that turn on and off)

      // Created by Rob Reynolds, copyright May 2004, Updated June 2004.

      // This program allows you to preload images on a page. 

     

     

      //====START BUTTON PRELOADER=====//

      // DROP THE SCRIPT BELOW On your page or in an include file

      //Make sure you specify where this file is located.

     

      <script Language="Javascript" src="jscript/buttonImagePreloader.js"></script>

      <script Language="JavaScript">

     

            var   imageName = new Array("image1","image2"); //ONLY The IMAGE NAME - NOTE: The imageName Name will also be this.

            var imageONNameADD="_f2"; //Name your "ON" Images as 'imageName + something more'.  Then tell me what the something more is.

            var strImageType="gif"; //What Type of Images are we displaying?

            var strFolderLocation="images";     //The Folder Location minus the last "/"

           

            preloadPageImages(imageName,imageONNameADD,imageName.length,strImageType,strFolderLocation); //Actually preloads the images.

           

            var imageAlt = new Array("Alt1","Alt2");  //The Alternative Text for the imageName

            var imageBorder = new Array(0,0);  //Border - Most of the time you are going to want this to be zero.  If you don't assign anything, I will assume 0.

            var imageHeight = new Array(25,25);  //Height - If you are not going to assign heights, just leave 'var imageHeight;'

            var imageWidth = new Array(184,184);  //Width - If you are not going to assign widths, just leave 'var imageHeight;'

            var imageHREF = new Array("1_overview.htm","anotherpage.htm");  //What page does the image point to? -Required assignment

            //If there is more than one page that makes the button appear "ON", put the linked item first, followed by the other pages separated by commas (,)

            var imageAccessKey= new Array("A","B");  //AccessKey - If you are not going to assign access keys, just leave the 'var imageAccessKey;'

            var imageTabIndex = new Array(1,2); //TabIndex - If you are not going to assign tab indexes, just leave the 'var imageTabIndex;'

            var buttonRepeatDirection = 0; //Which way do you want the buttons to repeat? Vertical is 0, Horizontal is 1.

            var buttonsPerRow=0; //How many buttons would you like per row? Zero for not used.

            var buttonSpace= 0; //How much space do you want between the buttons?  Zero for no space.

      </script>

      <script Language="JavaScript">

            SetUpButtons(imageName.length,imageName,imageAlt,imageBorder,imageHeight,imageWidth,imageHREF,imageAccessKey,imageTabIndex,buttonRepeatDirection,buttonSpace,buttonsPerRow);

      </script>

     

      //====END BUTTON PRELOADER=====//

*/

 

/*========START PRELOADING IMAGES================*/

           

//Declare the global variables

var img = new Array();

var imgON = new Array();

//Figure out what page you are on

var strWinLoc=window.location.href;

var intWinLoc;

//alert(strWinLoc);

intWinLoc=strWinLoc.lastIndexOf("/");

strWinLoc= strWinLoc.substr(intWinLoc+1);

//alert("strWinLoc= " + strWinLoc);

                                         

                 

function preloadPageImages(pImage,pImageON,intNumImages,pImageType,pFolderLocation) {

      for (i=0;i<=intNumImages-1;i++) {

            img[i]= new Image();

            imgON[i] = new Image();

            //SET SOURCES

            img[i].src =pFolderLocation + "/" + pImage[i] + "." + pImageType;

            imgON[i].src=pFolderLocation + "/" + pImage[i] + pImageON + "." + pImageType;

      }

      //alert("Preloading completed for " + intNumImages + " images.");

}    

 

/*========END PRELOADING IMAGES================*/

 

 

/*========START PAGE USE FUNCTIONS================*/

// Not using this at all.  Does not play nice with multiple instances.

function TurnOnAndOff(imgName,imgNumber){

      var boolOn=false;

      if (document[imgName].src==img[imgNumber].src){

            document[imgName].src=imgON[imgNumber].src;

      } else {

            document[imgName].src=img[imgNumber].src;

      }

}

/*========END PAGE USE FUNCTIONS================*/

 

 

/*========START DISPLAYING IMAGES================*/

 

//Entry point

function SetUpButtons(numButtons,imName,imAlt,imBorder,imHeight,imWidth,imHREF,imAccessKey,imTabIndex,intDirection,intSpace,intButtonsPerRow){

      //alert("Starting to set up " + numButtons + " buttons");

      /*All buttons the same, displayed on every page.*/

      for (k=0;k<=numButtons-1;k++){

            EachButton(k,false,'',imName,imAlt,imBorder,imHeight,imWidth,imHREF,imAccessKey,imTabIndex);

            //SPACING BETWEEN BUTTONS

            MakeSpace(k,numButtons,intDirection,intSpace,intButtonsPerRow);

      }

      /*

      //If you are going to use parent buttons, use this section.  You will have to configure it on your own.

     

      //Set up Parent Button to be Clickable but ON

      if (strWinLoc.indexOf("1")!=-1  && strWinLoc.indexOf("1d") < 0){ //Make first button gray but clickable.

                  strPageURLParentMenuGray="1_overview.htm";

      } else if (strWinLoc == "2_community.htm" || strWinLoc == "2a_consultation.htm") {

            strPageURLParentMenuGray="2_community.htm";

      } else if (strWinLoc == "1d_environments.htm" || strWinLoc == "1d1_impact.htm" || strWinLoc == "1d2_wetlands.htm"){

            strPageURLParentMenuGray="1d_environments.htm";

      }

     

           

      for (k=0;k<=numButtons-1;k++){

                  if (k==1 || k==2 || k==3){ //Display SubSections only if the user is on a page that should display one.

                  if (strWinLoc.indexOf("1")!=-1  && strWinLoc.indexOf("1d") < 0){ //Display First SubSection

                        //alert(k + "\n Location: " + strWinLoc + "\n Eval: " + strWinLoc.indexOf("1") );

                        EachButton(k,true,"",imName,imAlt,imBorder,imHeight,imWidth,imHREF,imAccessKey,imTabIndex);

                       

                  }

            } else if (k==5 || k==6 ) {

                  if (strWinLoc == "2_community.htm" || strWinLoc == "2a_consultation.htm") { //Display Second SubSection

                        //alert(k + "\n Location: " + strWinLoc + "\n Eval: " + strWinLoc.indexOf("2") );

                        EachButton(k,true,"",imName,imAlt,imBorder,imHeight,imWidth,imHREF,imAccessKey,imTabIndex);

                  }

            } else if (k==10 || k==11){

                  if (strWinLoc == "1d_environments.htm" || strWinLoc == "1d1_impact.htm" || strWinLoc == "1d2_wetlands.htm"){ //Display Third SubSection

                        EachButton(k,true,"",imName,imAlt,imBorder,imHeight,imWidth,imHREF,imAccessKey,imTabIndex); 

                  }

            } else { //It is not a spacer button

                        EachButton(k,false,strPageURLParentMenuGray,imName,imAlt,imBorder,imHeight,imWidth,imHREF,imAccessKey,imTabIndex);

            }          

      }

      */

      //alert("Finished setting up " + numButtons + " buttons");

}

 

//SPACING BETWEEN THE BUTTONS

function MakeSpace(intK,intNB,intD,intS,intBPR) {

      if (intK != intNB -1){

            //Determine repeat direction for buttons and space.

            if (intD !=null && intS != null) {

                  if (intBPR != null && intBPR != 0) {

                        //alert("intBPR == " + intBPR);

                      //check the mod from the current index.  If it is one less than the Buttons per row, it is time to repeat.

                      if ((1+intK) % intBPR == 0){

                              //direction is horizontal, so you drop a line

                              document.write("<br />");

                        }

                  }

                  //direction is vertical and there is no set buttons per row

                  if (intD != 1 && (intBPR == null || intBPR ==0)) {

                        //buttonsperrow is null or zero

                        document.write("<br />");

                  }

                  if (intS !=null) {

                        if (intS !=0) {

                              var h=0;

                              var _spacer;

                              //if vertical print <br />, if horizontal print spaces.

                              (intD != 1)? _spacer="<br />":_spacer="&nbsp;";

                              //alert("The direction will be " + _spacer);

                              if (intS !=0) {

                                    for (h=0;h<intS;h++){

                                          document.write(_spacer);

                                          //alert("Executing document\.write(" + _spacer + ")\;");

                                    }

                              }

                        }

                  }

            } else {

                  document.write("<br />");

            }

      }

}

 

 

 

function EachButton(j,boolSeparator,strPageURLParentMenu,_name,_alt,_border,_height,_width,_HREF,_accessKey,_tabIndex){

      //alert("This is button " + j );

      if (boolSeparator) {

            LinkSeparator();

      }

     

      //If it does, declare a new array and split the array out.

      var imgHREF=_HREF[j].split(",");

     

      //alert(imgHREF.length);

      var intLoops;

      intLoops=0;

      intLoops = imgHREF.length;

      var boolMatch = false;

      var k;

      for (k=0;k<=intLoops-1;k++){

            //alert (intLoops);

            if (strWinLoc != imgHREF[k] && strPageURLParentMenu != imgHREF[k]) {

            } else {

                  //alert("found one");

                  boolMatch=true;

            }

            //CHECKING FOR THE DEFAULT PAGES...

            if (strWinLoc =="" && (imgHREF[k] =="index.htm" || imgHREF == "index.html" || imgHREF[k] == "default.asp" || imgHREF[k] == "default.aspx")) {

                  boolMatch=true;

            }

      }

     

           

      if (!boolMatch) {

            //====START LINK TAG====//

            document.write("<A ");

            //TabIndex

            if (_tabIndex !=null){

                  document.write(" tabindex=\"" + _tabIndex[j] + "\" ");

            }

            //AccessKey

            if (_accessKey !=null){

                  document.write(" accesskey=\"" + _accessKey[j] + "\" ");

            }

            //onBlur && onMouseOut

            document.write(" onBlur=\"document." + _name[j] + ".src='" +img[j].src + "';\" onMouseOut=\"document." + _name[j] + ".src='" +img[j].src + "';\" ");

            //onFocus && onMouseOver

            document.write("  onFocus=\"document." + _name[j] + ".src='" +imgON[j].src + "';\" onMouseOver=\"document." + _name[j] + ".src='" +imgON[j].src + "';\" ");

            //LINK

            document.write(" href=\"" + imgHREF[0] + "\"");

            //Close tag

            document.write(">");

            //====END LINK TAG====//

            ImageDisplay(j,false,_name,_alt,_border,_height,_width,_accessKey);

            //====START LINK CLOSE TAG====//

            //End LinkTag

            document.write("</A>");

            //====END LINK CLOSE TAG====//

      } else { //Shows the button turned on

            if (strPageURLParentMenu == imgHREF[0] ){

                  document.write("<A href=\"" + imgHREF[0] + "\">");

            }

            ImageDisplay(j,true,_name,_alt,_border,_height,_width,_accessKey);

            if (strPageURLParentMenu == imgHREF[0] ){

                  document.write("</A>");

            }

      }

}

 

//Cuts down on code

function ImageDisplay(j,boolImageON,ID_name,ID_alt,ID_border,ID_height,ID_width,ID_accessKey){

 

      //====START IMAGE TAG====//

      //OPEN IMG TAG

      document.write("<IMG src=\"");

      //Define the Image Source

      if (boolImageON == true){

            document.write(imgON[j].src);

      }else {

            document.write(img[j].src);

      }

      document.write("\" ");

      //ALT      

      document.write(" alt=\"" + ID_alt[j] );

      // Alt + Information about how to access it

      if (ID_accessKey !=null){

            document.write(" [Alt + " + ID_accessKey[j] + " + Enter] ");

      }

      document.write("\"");

      //WIDTH && HEIGHT

      if (ID_width != null) {

            document.write(" width=\"" + ID_width[j] + "\" ");

      }

      if (ID_height != null) {

            document.write(" height=\"" + ID_height[j] + "\" ");

      }    

      //BORDER

      if (ID_border != null) {

            document.write(" border=\"" + ID_border[j] + "\" ");

      } else {

            document.write(" border=\"0\" ");

      }

     

      //NAME

      document.write(" name=\"" + ID_name[j] + "\" ");

      //ID

      document.write(" id=\"" + ID_name[j] + "\" ");

      //Self-Close IMG Tag

      document.write(" />");

      //====END IMAGE TAG====//

}

 

 

//WINDOW POPPING BUTTONS - If you have a button that should be opening up a new window

function AddPopupInfo(intWinNumber,imgHREF){

      var strKeyFunctions = new Array ("onKeyPress","onSelect","onClick");

      for (i=0;i<=3;i++){

            document.write(strKeyFunctions[i] + "=\"MyWindow" + intWinNumber + "=window.open('" + imgHREF + "','MyWindow" + intWinNumber + "','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=490,height=610,left=10,top=10'); return false;\"");

      }

}

 

//NOT USING THIS SCRIPT WITH THE FIRST FUNCTION....

//SEPARATOR

function LinkSeparator() {  //width="55" height="8"

      document.write("<br><IMG height='1' alt=' ' src='images/shim_blk.gif' width='1' name='link_separator'>");

}

 

/*========END DISPLAYING IMAGES================*/

 

 

/*========START ADA COMPLIANCE FOR BLIND PEOPLE EXAMPLE================*/

 

/*

 //ADA COMPLIANCE FOR BLIND PEOPLE

 //USE THE SAME AS YOU WOULD YOUR SITE MAP, only with the Div tags as shown.

 //DROP this ABOVE your PRELOADING REFERENCES.

 

<div style="display:none;">

      <p>If you are blind, you may have trouble with the section below this for the buttons

            I have included a bulleted list of links for you instead.

            <ul>

                  <li><a href="index.htm">Home</a></li>

                  <li><a href="1_overview.htm">Project Overview</a>

                        <ul>

                              <li><a href="1a_concept.htm">Concept Map</a></li>

                              <li><a href="1b_faqs.aspx">Frequently Asked Questions</a></li>

                              <li><a href="1c_schedule.htm">Project Schedule</a></li>

                        </ul>

                  </li>

                  <li><a href="2_community.htm">Community Involvement</a>

                        <ul>

                              <li><a href="2_comments.jsp" onKeypress="MyWindow2=window.open('2_comments.jsp','MyWindow2','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=490,height=535,left=10,top=10'); return false;" onSelect="MyWindow2=window.open('2_comments.jsp','MyWindow2','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=490,height=535,left=10,top=10'); return false;" onClick="MyWindow2=window.open('2_comments.jsp','MyWindow2','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width=490,height=535,left=10,top=10'); return false;">Comments

                                          Form</a></li>

                              <li><a href="2a_consultation.htm">Consultation and Outreach</a></li>

                        </ul>

                  </li>

                  <li><a href="3_projectnews.aspx">Project

                              News</a></li>

                  <li><a href="1d3_historical.htm" class="linklarge">Cultural Resources</a></li>

                  <li><a href="1d_environments.htm">Environment Resources</a>

                        <ul>

                              <li><a href="1d1_impact.htm">Environmental Impact Statement</a></li>

                              <li><a href="1d2_wetlands.htm">The Baker University Wetlands</a></li>

                        </ul>

                  </li>

            </ul>

      </p>

      <a href="#content">To Main Content</a>

</div>

 

 

 

//DROP THIS a little further down on the page, right after your PRELOADING REFERENCES FROM ABOVE

 

<a name="content"></a>

*/   

/*========END ADA COMPLIANCE FOR BLIND PEOPLE EXAMPLE================*/

posted on Thursday, June 24, 2004 11:37 PM

Feedback

# re: BUTTON IMAGE PRELOADER (JS)

Updated to reflect current changes
10/13/2004 9:29 AM | Rob

Post Comment

Title  
Name  
Url
Comment   
Protected by Clearscreen.SharpHIPEnter the code you see: