- Detecting Browser Plug-ins
- Around and Around with Loops
- Writing with Loops
- Using For/In Loops
- Using Do/While Loops
- Checking if Java Is Enabled
- Functions
- Using Multi-level Conditionals
- Working with Functions That Return Values
- Handling Errors
- Putting More than One Script on a Page
- Scrolling Status Bars
- Status Bar Messages
This chapter is from the book
This chapter is from the book
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.
)
Script 3.13 A rollover status message can be quite helpful to the user.
)
Figure 3.20 Note the custom status message for this link.
To put a message in the status bar
-
<a href="sean.html" onmouseover=
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.
"window.status='Best kid in the
world';return true" onmouseout=
"window.status='';return true">
my son</a>
-
<a href="cat.html" onmouseover=
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. "window.status='A very cute
cat';return true" onmouseout=
"window.status='';return true">
my cat</a>