onMouseOvers and Hyperlinks

Click here to find out more about scrollingCheck out this Scrolling Code,
or here to find out more about onMouseOver variationsthe Status Line does not get cleared.

Code:

<style>

a.info {
    position:relative;
    z-index:24;
    background-color:#ccc;
    color:#000;
    text-decoration:none
}

a.info:hover {
    z-index:25; 
    background-color:#ff0
}

a.info span { display: none }

a.info:hover span { /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em;
    left:2em;
    top:2em;
    border:1px solid #0cf;
    background-color:#cff;
    color:#000;
    text-align:left
}

</style>

<A HREF="scrolling.htm"
  onMouseOver="window.status='Check out this Scrolling Code'; return true"
  onMouseOut="window.status=''"> scrolling
<SPAN>Check out this Scrolling Code</SPAN>
</A>

<A HREF="mouseover.htm"
  onMouseOver="window.status='the Status Line does not get cleared'; return true"> onMouseOver variations
<SPAN>the Status Line does not get cleared</SPAN>
</A>

NOTE: The messages in the tooltips come from the text in between the <SPAN>s

The first hyperlink:

onMouseOver puts the message in the Status Line, while the onMouseOut clears out the Status Line.

The second hyperlink:

onMouseOver puts the message in the Status Line, but this time there is no onMouseOut to clear out the Status Line.

The onMouseOver Event Handler must return true. This tells the browser that it should not perform its own default action for the Event -- that is, it should not display the URL of the link in the status line. If you forget to return true, the browser overwrites whatever message the Event Handler displays in the status line with its own URL. NOTICE that the onMouseOut does not need to return true when you are "clearing out" the Status Line. The onMouseOut in this case is the "default".