The "return true;" is necessary to make the call work for you.

By default, the HREF value of a link (an anchor) displays in the status bar at the bottom of the browser when a user places the mouse pointer over the link.

In the following example, the onMouseOver= provides a special message "Fuzzy Link Search Engine" instead of the URL at the bottom of the screen:

Click Here to See This Script.

Notice that a standard JavaScript command right in the HTML was used in lieu of calling a function. The very same thing could be accomplished with a routine loaded at the top of your page, as well as other enhancements.

Which method should you use? Easy answer: "It depends." If you are using only one or two onMouseOver= calls on your page, the straight calls will be easiest. However, if you're using a lot of them, this second method will prove ultimately better and easier.

For example, you can load all of your various messages into an array and then set a flag to let the JavaScript determine which to display:

Click Here to see above script.

If you are using an HTML image map (ISMAP/USEMAP) in your HTML instead of the <A HREF="link.htm">Link</A> calls, move the onMouseOver= calls into your <MAP></MAP> tags.

Click Here to see above script.

Now, you can also implement the user-friendly actuating buttons on screen without having to reload the page.

For example, you can have the button "light up" when the visitor puts his/her cursor over a button. (This can be separate images for each button you use, or it can be a full menu bar single image if you prefer to use the ISMAP/USEMAP approach)

Some folks like the images to change (light up) when the user simply approaches a given button.

This is where the use of "invisible" images comes in. An invisible image is placed just below the desired button (generally about 10 pixels height, with a width corresponding to the button width)

Then, when the user's cursor passes over the invisible image, an onMouseOver= call causes the button above to be "lit".

With some page layouts, "invisible" images can be placed to surround a given button, so that regardless of the angle from which the user approaches, the button will change (light up)

When the Visitor Clicks the Cursor Over a Link or an Image

Now you are ready to add the onClick= call to your repertory of knowledge.

If you have hard coded a link using the <A HREF= tags, the usual result when the user clicks is that the browser effects a transfer to the specified URL.

However, there will be many occasions, especially when you are using image changes on that page, when the target URL changes.

A good example is an on-page sponsor rotator that changes sponsor banners every 30 seconds or so. If the visitor clicks on a given sponsor's logo, you will want the user transferred to that sponsor's home page, not to a hard coded link.

In the very same place that you have placed an onMouseOver=call, you can add an instruction to the browser about what to do if the user clicks in that location.

onClick="somecall()";

When a form submit button or a link or an image or a portion of an image is clicked by the user, this call allows you to specify just what is to happen.

For example, suppose you have created a JavaScript routine at the beginning of your page called calcIt() You can call the calcIt() routine when the user clicks a button by using the onClick= command:

In this example, a special JavaScript keyword is used: this

"this.form" within the parentheses simply helps the browser keep track of which button in which form is being clicked.

It is probably a good practice to use this "insurance call" if you have a number of different forms on the page. I forget it all the time with few deleterious side-effects. Otherwise it is unnecessary, particularly if different routines are called from different buttons.

One bit of code that may make life easier when you are coding HTML that calls an onClick= action. The call javascript: may be substituted for a hard coded URL in HREF statements:

Now, suppose you have created a JavaScript routine for sponsor banner rotation called getSponsor() that rotates the various images on the screen every 5 seconds or so.

When the user clicks on a given sponsor's image, you want him/her directed to the appropriate URL corresponding to that sponsor.

So, you want the URL to be changed dynamically with the images. In addition, you may want to change the status line display when the user places his/her cursor over that logo.

Click Here to see above script.

In this little script, onMouseOver= displays a different message on the bottom status line for each sponsor when the user moves the cursor over the respective image.

Two things to pay attention to: the onMouseOver= call is followed by "return true;" so that the status line will be updated, while the onClick= call is followed by "return false;"

If you omit the "return false;" call with the onClick= call, the browser will try to first interpret the click to the hard coded URL - in this case <A HREF="" - and will not execute your goThere() routine. Instead, your entire server directory will be displayed! Talk about unplanned and definitely undesired results!

In fact, it is probably pretty bad practice to use <A HREF="" etc. on your own pages. Instead, get in the habit of putting this page's file name inside the quotes. Then, if something goes awry, the worst that will happen is that this same document will simply be reloaded.

(You may have pages in your directory that you don't wish to give every Tom, Dick and Mary access to. But if they can get to your server directory, they can call any file to screen simply by typing that name on their browser's location line)

onLoad="somecall()";

This call triggers some JavaScript action as soon as the browser has finished loading the page to screen.

If it is a frameset document, this call doesn't trigger until after all of the frames have been loaded to screen.

Use the onLoad event handler within either the <BODY> or the <FRAMESET> tag:

In a <FRAMESET> and <FRAME> relationship, an onLoad= call within a frame (placed in the <BODY> tag) occurs before an onLoad= call within the <FRAMESET> (placed in the <FRAMESET> tag).

In the following example, the onLoad= event handler displays a greeting message after a web page is loaded.

onUnload="somecall()";

An unLoad= call is executed when you exit a document.

Use the onUnload= call within either the <BODY> or the <FRAMESET> tag:

In a <FRAMESET> and <FRAME> relationship, an onUnload= call within a frame (placed in the <BODY> tag) occurs before an onUnload= call within the <FRAMESET> (placed in the <FRAMESET> tag).

In the following example, the onUnload= calls the goodBye() function to say good bye to the visitor when he or she exits a particular web page:

onBlur="somecall();"

A "blur" occurs when a select, text, or textarea field on a form loses focus, i.e., the user moves the cursor out of that element by some action of his/her own. The onBlur= call executes JavaScript code when the specified element is "blurred".

You can use this to check that an entry in a form that was just completed by the user is correct, for example. i.e. as soon as the visitor clicks in the next form element, the form element he or she just typed has lost focus, (is "blurred")

Once you have used the onBlur= call, however, you will probably want to use the onChange= call to verify that the user made the correction.

onChange="somecall();"

A change action occurs when a select, text, or textarea field loses focus (the visitor has finished data entry and clicked somewhere else on your form) The onChange= call executes the specified JavaScript routine when a change has occurred.

onFocus="somecall();"

A "focus" happens when a form element on your page receives input focus by typing a tab or clicking the element with the mouse.

The onFocus= call executes JavaScript code only when the visitor "focuses" on a particular element.

The following example uses an onFocus= call in the "a" textarea form element to call the chkIt() function.

onSelect="somecall();"

A select action occurs when a user selects some of the text within a text or textarea field. The onSelect= call executes JavaScript code when the visitor selects an option.

The following example uses an onSelect= call in the text element named "a" to execute the chkIt() function.

onSubmit="somecall()"

A "submit" happens when a user submits a form by clicking a submit button, or hits a return on a single element form.

The onSubmit= call causes JavaScript code to be executed.

Purportedly, you can use the onSubmit= call to prevent a form from being submitted by putting a "return false;" statement immediately following the onSubmit= call.

If you omit doing so, the form will always be submitted. "return true;" is not necessary.

In the following example, the onSubmit= calls the chkIt() function to check the data being submitted. If the data is valid, the form is submitted; otherwise, the form is not submitted.

Form is purportedly not submitted:

Form is submitted: