JavaScript Example 1-6
Animated (Image Replacement) Menus

Click Here for Previous JavaScript Tutorial Home Click Here for Next

Example code from Dr. Clue's Javascript tutorial, http://www.drclue.net/F1.cgi/HTML/JAVA/JAVA.html

Example of animated menus using image replacement...



HTML Code Source

The HTML code for the menu above is as follows:

   
   <A      HREF=foo
           onMouseover="MENUBAR[0].HIGH();return true;"
           onMouseout="MENUBAR[0].LOW();"
           onClick="MENUBAR[0].LOW();alert('you clicked choice 1');return false;">
   <IMG    NAME=OPTION_1 
           SRC=js1_l.jpg 
           BORDER=0></A>
   <BR>
   <A      HREF=foo
           onMouseover="MENUBAR[1].HIGH();return true;"
           onMouseout="MENUBAR[1].LOW();"
           onClick="MENUBAR[1].LOW();alert('you clicked choice 2');return false;">
   <IMG    NAME=OPTION_2
           SRC=js2_l.jpg
           BORDER=0></A>
   <BR>
   <A      HREF=foo        
           onMouseover="MENUBAR[2].HIGH();return true;"
           onMouseout="MENUBAR[2].LOW();"
           onClick="MENUBAR[2].LOW();alert('you clicked choice 3');return false;">
   <IMG    NAME=OPTION_3
           SRC=js3_l.jpg
           BORDER=0></A>
   

As noted by Dr. Clue, "Effective use of this technique involves about 6 basic javascript concepts..."

   1.The use of the new operator. 
   2.The Image() Instance function. 
   3.The Array() Instance function. 
   4.The .src member of <IMG> 
   5.onMouseover and onMouseout event handlers of the <A> tag. 
   6.Object orientated javascript programming.

Something I do not understand is the use of "return true" and "return false" in the event handlers. See the Netscape reference manual for events. If I understand this right, returning true means that the link will be followed and returning false means that the link will not be followed. But how that applies to the current example is so far a mystery.

JavaScript Functions Source

Here is the source for the javaScript functions called by the HTML.
   function HIGH()
           {
           document.images[this.name].src=this.Image_1.src;
           window.status   =this.text;
           };
   function LOW()
           {
           document.images[this.name].src=this.Image_0.src;
           window.status   ='';
           };
   function MENUITEM(name,low,high,text)
           {
           this.name       = name                  ;
           this.text       = text                  ;
           this.Image_0    = new Image(147,30)     ;
           this.Image_0.src= low                   ;
           this.Image_1    = new Image(147,30)     ;
           this.Image_1.src= high                  ;
           this.LOW        = LOW                   ;
           this.HIGH       = HIGH                  ;
           };
   var MENUBAR;
   MENUBAR    = new Array();
   MENUBAR[0] = new MENUITEM("OPTION_1","js1_l.jpg","js1_h.jpg","Choice 1");
   MENUBAR[1] = new MENUITEM("OPTION_2","js1_l.jpg","js1_h.jpg","Choice 2");
   MENUBAR[2] = new MENUITEM("OPTION_3","js1_l.jpg","js1_h.jpg","Choice 3");
    // Hide Code Ends --->
 
Click Here for Previous JavaScript Tutorial Home Click Here for Next