|
|
 |
 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')"
|
