Javascript Status Bar

JavaScript gives you the ability to modify the status bar. For example it can be useful to display information about a link, when the user moves his mouse over it or you can display a small amount of information about the page the user is on in the status bar. You can also trick people into clicking a link, so be careful how you use it. If you play too many tricks on your visitors, they might not come back.

Status Bar Example:

  <html>
    <head>
      <title>JavaScript Status Bar</title></head>
      <body onLoad="window.status='Welcome!';return true">
    </body>
  </html>

onLoad tells the browser that as soon as your page finished loading, it will display in your current window’s status bar (window.status) the message “Welcome!”. The return true is necessary because with out, it won’t work.

Status Bar Example:

<html>
  <head>
    <title>JavaScript Status Bar</title>
  </head>
  <body>
    <a href="http://www.htmlcenter.com"
    onMouseOver="window.status='HTMLcenter';return true"
    onMouseOut="window.status='';return true">

      HTMLcenter

    </a>
  </body>
</html>

Our second script listening shows how to modify the status bar using onMouseOver and onMouseOut with links. When the user moves his mouse over the link, it will display “HTMLcenter” in the status bar. When he moves his mouse away from the link the status bar will display nothing.

You could also have another message displayed in the status bar, when the user moves his mouse cursor away from the link. You have to change the onMouseOut statement in the link to for example: onMouseOut="window.status='You moved your cursor away from the link.';return true".

Note: as already mentioned in the comments, it’s worth noting that browsers can block such JavaScript code from running. This very detailed post covers potential workarounds you can apply.

One Response

  • Jeremy

    Just an FYI. Most good browsers these days allow the end user to block these status updates because so many sites were using this to either hide the true location of a link or to stream text ads.

    Do not rely on your end user being able to see the status update, as it may very well be blocked.