shadowline
Prompt << Status Bar >> TimeOut
The status bar is the small message area you see at the bottom of the browser window. For IE users, you probably see a web page symbol and the word "done". For Netscpae users, you probably see "document : done". This area can actually be used to show a message. Click on these buttons and watch it change.

<script type="text/javascript">
<!--
function statwords(message){
window.status = message;
}
// -->
</script>

<center>
<form>
<input type="button" VALUE="Write a status bar message" OnClick="statwords('This is my message');">
<input type="button" VALUE="Erase the status bar message" OnClick="statwords(' ');">
</form>
</center>

The above is a simple FORM of 2 buttons. The JavaScript event OnClick activates the function called statwords and passes a text string to a variable called message. The function then activates the status bar area and inserts the text string. If you need a refresher on variables: click here.

Notice the use of the single quotes around the text message variable. This prevents confusion between the text string and the double quotes that are around the main OnClick event properties.

A popular role of the status message is for links. As the visitor hovers their mouse over a link, a message can appear to help them understand where that link will go. This helps when you are dealing with text links. Using the ALT property in the IMG tag for an image link is an additional help. Text links do not have an ALT feature available though.

Mouse over this link !

<A HREF="Somepage.html" OnMouseover="window.status='This link goes to another page';return true;" OnMouseout="window.status=' ';">

Mouse over this link !

</A>

This uses 2 JavaScript events. OnMouseover and OnMouseout. One reacts when the mouse is over the selected (link) area. The other reacts when the mouse exits the selected (link) area. Instead of using a function to write the message to the status bar as like the previous examples, the events are writing the message directly there.

You are probably wondering about the return true; value in the OnMouseover. This is a counter measure to make the browser do the OnMouseover event instead of it's natural action. Usually the browser would display the URL of the link in the status bar. Entering the "return true;" will over-ride this effect and carry out the OnMouseover event. Here is that same link without the "return true;" entered :

Mouse over this link !

Makes a difference, doesn't it? Now, what if you wanted to actually include a single (or double) quote in the status bar message? Entering it into the text string will confuse the browser and cause an error. Have no fear, there is a way to do this too. A backslash \ is used to specify that the next character belongs to the output message and not part of the overall text area quotes.

Mouse over this link !

<A HREF="Somepage.html" OnMouseover="window.status='This link goes to Dave\'s other page';return true;" OnMouseout="window.status=' ';">

Mouse over this link !

</A>
Prompt << Status Bar >> TimeOut
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow