Categories:

onMouseover, onMouseout

Next up, the onMouseover and onMouseout event handlers. Just like the "onClick" event, these events can be added to visible elements such as a link (<a>), DIV, even inside the <BODY> tag, and are triggered when the mouse moves over and out of the element (big surpise). Lets create a once very popular effect- display a status bar message when the mouse moves over a link:

Output: Dynamic Drive

<a href="blabla.htm" onmouseover="status='DHTML code library!';return true" onmouseout="status=' '">Dynamic Drive</a>

Several new concepts arise here, so I'll go over each one of them.

  • the "status" refers to window.status, which is how you write to the status bar.
  • Note that instead of calling a function, we called directly two JavaScript statements inside the event handler :"status='Do not click here, its empty!';return true" This is ok, but you must separate multiple statements with a semicolon (;). You could have, alternatively, written everything up until "return true" as a function and then calling it:

    function writestatus(){
    status="Do not click here, its empty!"
    }

    and then:

    onmouseover="writestatus();return true"
     
  • So you're thinking, "what is return true?" Good question. You need to add this line of code to set the status property with the mouseover effect. Uh? I know, don't worry so much now, it really isn't important. Just remember you need this to "activate" the status onmouseover effect.
  • onmouseout="status=' '" clears the status after the mouse leaves the link. Whenever the mouse moves away from the link, the status bar is "reset" again. If you don't insert this code, the status bar will still have those words you entered into it even after taking away the cursor.
  • Whenever we have nested quotations, the inner ones are always singled. Ie: onclick="alert('hello')"