Web surfing can be about information. But increasingly it is becoming more than that: the web is a source of entertainment.
As a medium that provides information all that is needed is some text with perhaps the occasional images. As an entertainment more is required. Besides interesting graphics, well layout pages and site structure a more "lively" web page can uplift its entertainment value.
The funny looking exclamation marks and dashes (ie. "<!--"
<A HREF="anylink.html" onMouseOver="self.status='Hello!';return true">1.Moving the mouse over this text will display the message.</A>
This code causes a message to appear in the status area when the mouse is moved over a link or an object such as an image. This is a fairly simple technique, but its power lies in its simplicity. It can be used to provide "help", additional information, jokes or just something fun about the link or image that the surfer is pointing to.
When the users take some action, such as moving the mouse, messages called events are generated. This tells the program what the user is doing. These messages are passed to the Event Handler, if there is one, which then tells the program to do something.
In this example it causes the word "Hello!" to be displayed in the status area of the browser. (Fig 1) This is achieved by the "self.status=" element which tells the browser to set the status area to display whatever text is contain within the single quotation mark.
You can easily adapt this code to display any other word or words. For example, the following display a longer message when the mouse is over the Apple logo (Fig 2):
<A HREF="anylink.html" onMouseOver="self.status='Hello! Your mouse is over the apple.';return true">2.<IMG SRC="apple.gif" ALIGN=MIDDLE WIDTH="32" HEIGHT="36" BORDER="0" HSPACE="0" VSPACE="0"></A>
Really long message is however not advisable. Bear in mind that the number of words that can be displayed in the status area is limited by the size of the browser and monitor (and not all surfers use a 21" monitor!). If the sentence is too long it simply gets truncated. Anyway long messages tend to loose their impact. The message should be short and to the point.
The message does not just have to appear in the status area. It can be displayed in a text box within the web page for example, or in a text box or status area of another window.
Take a look at this example: (this goes within the <BODY></BODY> containers)
Message will appear here:
<TEXTAREA NAME='outputBox' ROWS='3' COLS='50'></TEXTAREA>
<A HREF="anylink.html" onMouseOver="self.document.nameOfForm.outputBox.value='Hello! Your mouse is over the apple.';return true" onMouseOut="self.document.nameOfForm.outputBox.value='Bye!';return true"><IMG SRC="apple.gif" ALIGN=MIDDLE WIDTH="32" HEIGHT="36" BORDER="0" HSPACE="0" VSPACE="0"></A>
Moving the mouse over the apple logo will display a message in the text box on the web page. (Fig 3)
And moving the mouse away from the logo will display the message in Fig 4.
The codes are very similar to the first example.
A text box, which is an element of an HTML form, is created. It is given a name. Here it is just "nameOfForm" which you can replace with any name you wish.
To cause the message to appear within the text box the onMouseOver handler is modified. The "self.status" is replaced with "self.document.nameOfForm.outputBox.value".
What does this mumble jumble mean? This simply refers to the value of the text box. More specifically, the "self.document" component (formally known as an "object") refers to the current browser window. The "nameOfForm.outputBox" component refers to the text box named "outputBox" in the web form named "nameOfForm". The "value" element says that we are talking about the value of the component (here it is the outputBox).
If you wish to use other name for the form and text box, remember to change all occurrences of "nameOfForm" and "outputBox".
The part to note is the additional event handler "onMouseOut". This event is triggered, as the name suggests, when the mouse moves away from the object or links. The syntax is identical to the onMouseOver event handler.
The onMouseOut event handler is not essential. But without this handler the message display by the onMouseOut handler will remain in the text box. This is different to the first example where the message in the status area will disappear once the mouse leave the object. Depending on the nature of the message you may wish it to disappear or to remain there.
Adds the following lines within the codes for the web form in the previous example:
Type your name here:
<INPUT TYPE=TEXT NAME='theMsg' VALUE='' SIZE= 50 MAXLENGTH=80>
self.document.nameOfForm.outputBox.value= "Welcome to my web site "+ document.nameOfForm.theMsg.value + ". Enjoy the stay!"
This code grabs the text (the persons name) entered by the user in the text box and then uses it as part of a customized message. (Fig 5) This adds a more personal touch to the message.
The function is defined within the <SCRIPT></SCRIPT> container in the header part of the HTML file. The "self.document.nameOfForm.outputBox.value" part of the code as explained above simply refers to the value of the outputBox. Similarly, "document.nameOfForm.theMsg.value" refers to the value of the text box named "theMsg", which is the box the user enter their name in. The plus "+" sign combines the rest of the predetermined message (which can be replace by any message of your choice) with the name entered by the user.
The "Hello" and "Bye" examples used here are not particularly imaginative. Perhaps you can do better?
|Back to Contents|
Modified on: 29th November, 1998.
Copyright © 1998 Raymond Yu