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
Output: Dynamic Drive
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
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:
status="Do not click here, its empty!"
- 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
- 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: