HTML and CSS Reference
In-Depth Information
When an object has the focus, it is waiting for the user to do something, such as click a
button, click a link, or start or stop an animation. If you are moving between frames, the
frame where the mouse is pointing has the focus, and when the cursor moves out of the
frame, it loses focus or is “blurred.” The
onFocus
event handler is triggered by the user
clicking on the current window, frame, or form element, or by using the Tab key to cycle
through different elements on the screen. The
onFocus
event handler allows you to ini-
tiate a window or frame type function when the mouse is moved into a window, and the
onBlur
event handler is triggered when you leave a window or frame. This can be caused
by the user clicking outside of the current window, frame, or form element. It's exactly
the opposite of
onFocus
.
When a window has focus, it becomes the top window in a stack of windows. Exam-
ple 13.6 changes the background color of the left frame to pink when it goes into focus
and to yellow when it goes out of focus. The status bar at the bottom of the window
reflects what frame has the focus.
EXAMPLE
13.6
<html>
<head><title>Frame Me!</title></head>
1 <frameset cols="25%,75%">
2 <frame src="leftfocus.html" name="left">
3 <frame src="rightfocus.html" name="right" >
</frameset>
</html>
----------------------------------------------------------------------
<!-- The right frame file -->
<html>
4 <head><title>Right Frame</title></head>
5 <body bgColor="lightblue">
<font face="arial" size=4> right frame<br />
</body>
</html>
----------------------------------------------------------------------
<html>
<head><title>Left Frame</title>
6
<script type="text/javascript">
7
function focus_on_me()
{
document.bgColor="pink"; //
Current doc is the left frame
8
window.status="focus leftframe";
}
9
function defocus_me()
{
parent.left.document.bgColor="yellow"; //
Another way to
//
reference
10
window.status="focus rightframe";
//
See the status bar
}
</script>
