HPi - Javascript - Status Bar

Status Bar

[Javascript]

Normally, when the mouse cursor is placed over a link, the status bar will simply display the URL of that link. Javascript allows the web page designer to customize the information displayed in the browser’s status bar when the mouse cursor is over a link.

Let’s demonstrate this by moving your mouse cursor over each of the following links and observe what the browser’s status bar displays:

Normal Link

Javascript Link

onMouseOver Example:

We use two Javascript techniques within the <a href=""> tag:

an event handler called onMouseOver
an object called window.status

Look carefully at this example:

<a href="http://www.yahoo.com" onMouseOver="window.status='THIS 
            LINK TAKES YOU NOWHERE'; return true;">Javascript 
            onMouseOver Example</a>

The value of window.status= (enclosed within single quotations!) will be displayed in the browser’s status bar.

Javascript onMouseOver Example

onMouseOut Example #1:

You should have noticed that, after moving the cursor away from the link, the status bar message remains on the screen. It will remain there until you “mouseover” another link.

If you wish to prevent this, include a new event handler called onMouseOut:

<a href="http://www.yahoo.com" onMouseOver="window.status='THIS 
            LINK TAKES YOU NOWHERE'; return true;" onMouseOut="window.status=''; 
            return true;">Javascript onMouseOver and onMouseOut Example 
            #1</a>

Javascript onMouseOver and onMouseOut Example #1

onMouseOut Example #2:

Maybe you want to try something more colorful:

<a href="http://www.yahoo.com" onMouseOver="window.status='THIS 
            LINK TAKES YOU NOWHERE'; return true;" onMouseOut="window.status='HEY! 
            COME BACK HERE AND CLICK ON ME!'; return true;">Javascript 
            onMouseOver and onMouseOut Example #2</a>

Javascript onMouseOver and onMouseOut #2