Gary L. Simmons  rev 06/17/03  webwonks.org/WebBuilding/TextRollovers.html
Home  Marathon  Joke OT Weak  Web Building  Resumé  Lynx  Hobbies  Extra  Site Map Resume Joke of the Weak Go to next department

Gary's Web Building

Status Bar Text Rollovers

Text rollovers are a different kind of JavaScript rollover. A kinder gentler rollover. A rollover for the new age without all the environmental devastation, sexism, bigotry and imperialism of the old way of doing rollovers. Gone are the huge energy requirements of producing and transmitting the massive and awkwardly ponderous Soviet-Block-industrial-grade graphics over the Internet. It is now possible, thanks to such activist groups as "Hairy Legged Girls for Text" and the "Rainbow Coalition Against Exploiting Color in Graphics" to completely bypass this politically incorrect   way of providing additional information to your users. Gosh... looking back, weren't we foolish and old fashioned??

You used the OnMouseOver event in the image rollovers, now you can use the same event to place an informational tidbit into the status bar down at the bottom of the browser window when a user passes his mouse cursor over a link. It is very very easy to do and requires no additional scripting outside the Anchor tag itself. Interested? Read on.

  • In the beginning:

    Your normal link looks something like this: <a href="WebBuilding.html">Web Building</a>. The anchor tag consists of a URL and the text that composes the link. Normally you would have the text be descriptive yet still fit into the train of thought of the sentence within which the link resides.

  • Let there be Status:

    Now you can create a link that looks like this:

    < a href="WebBuilding.html" onMouseOver="window.status = 'Did I say web building? I meant to say this site will pump you up so that you can knuckle a Black Widow before she can count to 4!'; return true;" onMouseOut="window.status = ' '; return true;">Web Building</a>

    and in the process provide a butt load of information into the status bar when the mouse cursor passes over the link. Try it out ----> Web Building There is no JavaScript coding outside of the HTML anchor. You need not hide the JavaScript in comments nor nest your statements in the head tag using this technique:

    < SCRIPT LANGUAGE="JavaScript" type="text/javascript">
    < !-- Begin
    scripting code blah blah
    // End -->
    < /script>

  • Break that down!

    OK it is probably not super clear what that JavaScript is doing so let me accidentally muddy up the waters while I stumble through this explanation.
    onMouseOver = When your mouse passes over a link on a browser page, an "event" is generated, onMouseOver is the event handler that springs to life when this happens. The event handler supplies code to the browser when the event occurs. You supply that code to the event handler.

    window.status = a property of the browser window is the text contents of the status bar. By assigning text to the window.status property, you put text into the status bar that your users can see.

    ;return true = is necessary to display the message, if it isn't there than it will not display the message. The actual function of this bit of code is to irritate the coder and is never used by the code parser for anything else. It is another UN plot. OK I've told you. Now I'm going to have to kill you.

    onMouseOut = there is a problem in some versions of Internet Explorer where it does not respond to the mouse cursor leaving the link. The status bar message stays until another message is written into the status bar. By trapping the onMouseOut event and setting the window.status property to a blank this problem is solved.

  • Look out fors:

    An important thing to be aware of is the use of apostrophes in your status bar messages. For sure you are going to try to write a status bar message like "This is Gary's "cool" poot shootin' refried bean page". It is correct grammar but it is bad JavaScript syntax. Those apostrophes and quotes are used by JavaScript for it's own purposes and to try to dump them into a message will totally twist JavaScript's code parser nipples clean off in your hand. You have to express apostrophes and quotation marks as special characters.

    The apostrophe =     &acute;
    Double left quote = &#147;
    Double right quote = &#148;
    The double quote = &quot;

    Put them in a command thusly:

    window.status = 'This is Gary&acute;s &quot;cool&quot; poot shootin&acute; refried bean page'

Top of page

Back to Web Building