Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
This chapter is from the book

Status Bar Messages

Another trick you can do with the browser's status bar can be quite useful and effective: you can use the status bar to annotate a link, giving the user more information about the link when the cursor rolls over the link, but before the user clicks on the link. For example, if you have an image map on your page, you can use the status bar to describe the areas of the image map to the user. By giving users more information, you enhance their experience with your site. Script 3.13 introduces a new way to use JavaScript: you can add JavaScript commands into HTML anchor tags (the tag used for links). Take a look at Figure 3.20 for the result.

03fig32.jpg

Script 3.13 A rollover status message can be quite helpful to the user.

03fig33.jpg

Figure 3.20 Note the custom status message for this link.

To put a message in the status bar

  1. <a href="sean.html" onmouseover=
    U2192.GIF "window.status='Best kid in the
    U2192.GIF world';return true" onmouseout=
    U2192.GIF "window.status='';return true">
    U2192.GIF my son</a>
    
    This line is an HTML anchor tag with a standard text hyperlink in it, except for a snippet of JavaScript code. The onmouseover event handler tells JavaScript to execute the action when the user moves the mouse pointer over the link. The action in this case is to set the window.status object (i.e., the message in the status bar) equal to the string 'Best kid in the world' when the user moves the pointer over the link my son. The ;return true is necessary to display the message; if it's not there, the message won't work. The onmouseout handler works around a problem in some versions of Internet Explorer, because while Netscape understands that you should only display the message during the mouseover, Microsoft Internet Explorer (or at least some versions) will continue to display that message from the mouseover on. The onmouseout resets window.status to nothing. Again, you need the ;return true to make sure that the script will work.
  2. <a href="cat.html" onmouseover=
    U2192.GIF "window.status='A very cute
    U2192.GIF cat';return true" onmouseout=
    U2192.GIF "window.status='';return true">
    U2192.GIF my cat</a>
    
    Proving an old Hollywood proverb wrong, this script manages to work well with both kids and animals. In this line, the cat gets the same treatment as the kid in the preceding line.
  • + Share This
  • 🔖 Save To Your Account