The Ugly JavaScript Book - Chapter Eleven

Chapter Eleven
Interacting with the Visitor

Making things happen when your visitor moves or clicks the Mouse, or types is the real magic of using Javascript in the modern browser.
     Oh, you've been doing that already for some time using HTML. For example, your visitors could click on a hyper reference (link) and be taken magically to another URL.
     The "big deal" with JavaScript is simply that you can cause more things to happen upon various actions by the user.

When the visitor to your pages moves the cursor over a link or a visible image or an invisible image allows you to cause a reaction.
     Indeed, one of the most powerful calls you can use is the onMouseOver= call. As its name implies, it executes a routine when the user's cursor passes over a link, an image or just part of an image - even if that image can't be seen on screen.
     Just a moment - you don't know what an invisible image is? OK. For most situations, when you want to use an invisible image, you create a one pixel .gif exactly the same color as the background you are using. That is, it has a height and width of just one pixel.
     In some cases, you may wish to make the one pixel .gif transparent, especially if you plan to display it over a busy background.
     Why one pixel? Because it is tiny. Generally less than 50 bytes file size. You then use the built in browser rendering engine to scale it up to the size you want.
     One caution: if you are scaling it up to a very large size, make your tiny .gif about 10 pixels by 10 pixels size, to reduce rendering time. And never use a one by one pixel .gif as a background .gif in the tag -- it'll take 2 or 3 minutes to paint the screen!

     An onMouseOver= action occurs once each time the mouse pointer (cursor) moves over a link or an image from outside it, or whenever the cursor passes from area to area within a mapped image.
     somecall() is any function (routine) that you have established in your JavaScript at the top of the page within the <HEAD></HEAD> tags, or may be a direct JavaScript command.
     If you are using onMouseOver= call to cause any information to be printed on the status line at the bottom of the screen, you must add an extra line of JavaScript to the call:

onMouseOver="somecall(); return true;"

     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:

<TITLE>Simplest "onMouseOver"
<BODY BGCOLOR="white">
<P><B>JavaScript for the Simplest
<FONT COLOR="blue">onMouseOver=</FONT> calls</B>
<TR><TD>The simplest way to implement the
<B>onMouseOver=</B> call is to include the
text you wish sent to the status line within the
link itself (within the <A HREF= tag). If you
are employing only a few of these, it will suffice.
<P>Moving your cursor over the link below will
implement the call which is simply integrated into
the HTML as follows:
<P><FONT COLOR="blue">
<A HREF=""
onMouseOver="window.status='Try Our Fuzzy Link Search Engine';return true;">
Infohiway Home Page</A></FONT>
<A HREF=""
onMouseOver="window.status='Try Our Fuzzy Link Search Engine';return true;">
Infohiway Home Page</A></TD></TR>

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:

<TITLE>Arrayed "onMouseOver"
<!-- Hide from JS-Impaired Browsers
var flg=0;
var sep=" Check out the ";
/* Here I've just loaded some messages in
   to an array that will be displayed on
   screen on the status line according to
   which link has been "mouseovered" */
var msg=new Array();
msg[0]="Fuzzy Link Search Engine";
msg[1]="Latest from Microsoft";
msg[2]="Latest from Netscape";

/* If your flags are set to the same values
   as the order in which the links appear on
   your HTML page (commencing with 0)
   you can read the link value from
   browser memory using the
   document.links[x] call to still
   provide your visitor with the info that
   would have been displayed without the
   onMouseOver= call, i.e. the URL. Since
   old hands on the net don't like to click
   on a link for which they don't know the
   destination, this is a pretty good idea
   to implement in your own code. */
function dispIt(){
// End Hiding -->
<BODY BGCOLOR="white">
<P><B>JavaScript for Arrayed
<FONT COLOR="blue">onMouseOver=
</FONT> calls</B>
<TR><TD>When you have a number of images and links
for which you wish to display an alternate message in
the status line, it will probably simplify things if you
load those messages into an array and then use a function
to execute the display.
<P>Moving your cursor over the links below will
implement the status line display from an array.
<A HREF=""
onMouseOver="flg=0; dispIt();
 return true;">
Infohiway Home Page</A> /
<A HREF=""
onMouseOver="flg=1; dispIt();
 return true;">
Microsoft® Home Page</A> /
<A HREF=""
onMouseOver="flg=2; dispIt();
 return true;">
Netscape® Home Page</A>

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.

<TITLE>onMouseOver Action in Image
<!-- Hide from JS-Impaired Browsers
/* In this script, the onMouseOver= calls
   are placed inside the map definitions.
   Note that the call requires the return
   true statement to allow the array
   variable to be displayed in the status
   line. At present, I haven't found a
   way to suppress the onClick actions if
   they occur within an image map, so you
   might as well include the HREF= inside
   the map as well. */

var flg=0;
/* In this array both the URL and the
   message were included, since lots of
   folks like the destination displayed.
   Notice that spaces may be included
   for your display. They will not be
   ignored as they would be in straight
   HTML. */
var msg=new Array();
+" Check Out the Latest from"
+" Netscape!";
+"walker Download Free Books from"
+" WebWalker!";
+"er Tips and Tricks for Developers";
function dispIt(){
// End Hiding -->
<P><B>JavaScript for onMouseover
 Actions in Image Maps</B>
<P>Displays in status line. (Don't click unless
you want to go there!)
<P><IMG SRC="imgmp.gif" WIDTH="340"
<MAP NAME="menu">
<AREA SHAPE="rect"
return true;">
<AREA SHAPE="rect"
return true;">
<AREA SHAPE="rect"
 onMouseOver="flg=2;dispIt();return true;">

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.


     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:

<FORM NAME="ug">
<INPUT TYPE="button" VALUE=" Calculate It "

     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:

<A HREF="javascript:flg=0;clickIt();return false;"> WebWalker Virtual Press Home Page</A>

     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.

<TITLE>Rotating Sponsors - Dynamic
<!-- Hide from JS-Impaired Browsers
var flg=-1;
var halt=0;

/* First an array to contain the status line
   messages to be displayed. */
var msg=new Array();
+"walker Download Free Books!";
+" Latest from Netscape";

/* Next an array to hold the images to be
   rotated or swapped. Although I used
   just 3 here, you can use as many as
   you wish.
   All should be the same size as the initial
   display image, since all the rest will be
   scaled by the browser to fit those
   dimensions */
var logo=new Array();

/* Finally, an array for the destination
   URLs to correspond to the images. */
var durl=new Array();

/* When the visitor clicks, the halt flag
   is set to 1. Therefore, if the timeout
   switches, the image swap is bypassed. */
function getSponsor(){
 if (halt!=1){
  if (flg>2){
  /* This time out is set for 5000
      milliseconds which is 5 seconds. You
     change it to be the time of display for
     the image you want. */

function goThere(){

function dispIt(){
 +"           Check it out! It's worth a visit!";
// End Hiding -->
<B>JavaScript for Rotating Sponsors - Dynamic onClick Actions</B>
<BR>Very fast rotation, status line changes with image change
and also onMouseover
<P><A HREF="" onClick="halt=1;goThere();
 return false;"
 onMouseOver="dispIt();return true;">
<IMG SRC="webw.gif" WIDTH="340"
 NAME="spon" HEIGHT="72" BORDER="0">
<BR><B>Please Visit Our Sponsors!</B>
<!-- Hide from JS-Impaired Browsers
// End Hiding -->

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)


     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:

<BODY onLoad="someCall()">
<FRAMESET ROWS="10,*" onLoad="someCall()">

     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.

 onLoad="window.alert('Welcome to our Home Page! Thanks for Visiting!');">

     An unLoad= call is executed when you exit a document.
     Use the onUnload= call within either the <BODY> or the <FRAMESET> tag:

<BODY onUnload="somecall();">

     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:

function goodBye(){
 alert("Good Bye! Thanks for visiting!);
<BODY onUnload=goodBye()>

     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.

 NAME=userName onBlur="required(this.value)">

     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.

 NAME=userName onChange="checkValue(this.value)">

     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.


     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.

 NAME=a onSelect="chkIt()">

     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:

 NAME=a onSelect="chkIt();return false;">

     Form is submitted:

 NAME=a onSelect="chkIt()">

Links: Introduction | Chapter One | Chapter Two | Chapter Three | Chapter Four | Chapter Five | Chapter Six | Chapter Seven | Chapter Eight | Chapter Nine | Chapter Ten | Chapter Twelve | Chapter Thirteen | Chapter Fourteen | Chapter Fifteen | Chapter Sixteen | Chapter Seventeen | Chapter Eighteen | Chapter Nineteen | Chapter Twenty | Chapter Twenty-one | Chapter Twenty-two | Chapter Twenty-three | Appendix A | Appendix B | Appendix C | Appendix D | Cover
This free virtual book provided courtesy of:
AutoScripter(tm), the site for professional Web Designers and Developers and
WebWalker Virtual Press, virtual publishing on the Web since 1994
Other free e-books from WebWalker: The All American Terrorists | The Gnomes of Jost | For the Love of Entropy | The Trees of Kratva | The Arch of Rain Magicians | Lightshow | The Black Mancutters Guild | The Septoracle

© Copyright 1997, 1999, 2000, 2001 John H. Keyes