Using JavaScript to Control
Buttons and Frames

Screenshot of demo page. Click to access the demo.

I. The Demo

This demonstration page shows how to use JavaScript to highlight clickable items ("rollovers") and coordinate content in multiple frames based on user input.

The page consists of three frames, labeled in this figure A, B, and C:

• Frame A, the scrollable frame along the left side of the window, contains thumbnail images that represent various Final Seminar projects described in detail in Frame C at right.
  
  
• Frame B is a small, non-scrolling space adjacent to Frame A at the top of the window. It contains a clickable graphic that shows a slider pushed all the way to the left, and the date 1999.
  
  
• Frame C is the main content area. It contains descriptions of Final Seminar projects from 1999 and (potentially) 2000.

Various elements can be changed and manipulated.

Clicking on the slider graphic in Frame B switches the overall context from one year to the other (1999 to 2000 and vice versa). When this happens, the pages displayed in both Frames A and C change.

The scripts that produce these effects are discussed below.

II. Rollovers

Button rollover, or source replacement, is one of the few visual effects that can be performed in standard (non-DHTML) JavaScript without reloading the page. The scripting end is quite simple:

var pixNames = new Array("aversionAesthetics","bookscapes",
"fugue","ism","wallet");
	
function rollOn(which)
  {
    document.images[which].src="buttons/" + 
    pixNames[which] + "On.jpg";
  }

function rollOff(which)
  {
    document.images[which].src="buttons/" + 
    pixNames[which] + "Off.jpg";		
  }

All the above code occurs within <SCRIPT></SCRIPT> containers in each of the two thumbnail pages, which are loaded into Frame A. The var or variable declaration statement occurs outside the two functions. It establishes an array of image file names. These correspond to the names of the images that are used in this particular thumbnail set. The order of items in the array follows the order of images in the thumbnail stack.

The two functions, rollOn(which) and rollOff(which), each contain only one statement, which resets the source (SRC) property of the one and only image on the thumbnail page. This image is referred to through the built-in images array, which is the key to all rollover work. the only difference between the two functions is the suffix ("On" or "Off") appended to the source file names. Other naming conventions could be used, as long as they are consistent.

The parameter which is passed to the source replacement functions from the HTML code. It is a number between 0 and 4, indicating one of the five images on the page.

The HTML end is also fairly straightforward, though there's one important twist:

<a href="sem2000.htm#aversionAesthetics" target="rightBottom" 
onMouseOver="rollOn(0)" onMouseOut="rollOff(0)">

<img src="buttons/aversionAestheticsOff.jpg"
width="110" height="110" border="0">

</a>
 

Note that the handlers onMouseOver and onMouseOut occur within the anchor (A) tag, not within the image (IMG) tag. While Internet Explorer will let you put them in either position, Netscape won't perform the rollover unless the handlers are in the anchor tag.

III. Multiple Frame Updates

The JavaScript controlling multiple frame updates is found within a <SCRIPT></SCRIPT> container on the page yearSet.htm, the page that contains the slider graphic, which is loaded into Frame B.

Here's the script:

var theYear=1999;

function yearSet()
  {
    if(theYear==1999)
      {
        document.images[0].src="buttons/slotRight.gif";
        parent.frames[2].location="sem2000.htm";
        parent.frames[0].location="thumbnails00.htm";
        theYear=2000;
      }
    else
      {
        document.images[0].src="buttons/slotLeft.gif";
        parent.frames[2].location="sem1999.htm";
        parent.frames[0].location="thumbnails99.htm";
        theYear=1999;
      }
    }

Again, a variable (theYear) is declared outside the function with the value 1999, which is the year displayed when the frameset loads. This value could be either a number or a string (it's a number here).

Within the function yearSet(), theYear is tested. If it is 1999 then the appropriate changes are made to change the context to the year 2000. Frame C is the main content frame, the third frame defined in the frameset and hence parent.frames[2] in the built-in frames array. Contents of this frame are replaced with the page sem2000.htm. The thumbnail page in Frame A (parent.frames[0]) is also replaced.

the else clause of this complex if construction covers the alternative case, if theYear is 2000. In this case the frames are set back to the appropriate contents for 1999.

IV. Download

The complete demonstration fileset can be found in a directory called jsButtFrames in the productionShare directory on Crow.