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