HTML and CSS Reference
In-Depth Information
EXAMPLE
13.6 (
CONTINUED
)
</head>
11
<body onFocus="focus_on_me()"
//
Event handlers
12
onBlur="defocus_me()"
bgColor="lightgreen">
<image src="signs.jpg">
</body>
</html>
EXPLANATION
1
In this example, there are three files involved with frames. This is the HTML file
that defines the frameset. It consists of a main window divided into two frames, a
left frame consisting of 25 percent of the window, and right frame consisting of 75
percent of the window.
2
The left frame's source code is in a file called
leftfocus.html
.
3
The right frame's source code is in a file called
rightfocus.html
.
4
This HTML document is the content for the right frame.
5
The background color of the right frame is
lightblue
.
6
This is the start of the JavaScript program found in the file called
leftfocus.html
.
7
This user-defined function, called
focus_on_me()
, is called when the
onFocus
event handler is triggered; that is, when the user's cursor has focus in that window.
It assigns a pink background color to the left frame by going down the JavaScript
hierarchy:
parent.left.document.bgcolor
.
8
The status bar in the window is assigned the string
“focus leftframe”
. Look in the
status bar.
9
This user-defined function, called
defocus_me
, is called when the
onBlur
event
handler is triggered; that is, when the user's cursor loses focus in that window. It
assigns a yellow background color to the right frame by going down the JavaScript
hierarchy:
parent.right.document.bgcolor
.
10
The status bar in the window is assigned the string
“focus rightframe”
. Look in the sta-
tus bar. (If the status bar doesn't show anything, it could be that the “Hide the status
bar” feature has been enabled for your browser. For Firefox, see Tools
→
Options
→
Enable JavaScript
→
Advanced JavaScript Settings).
11
An
onFocus
event handler is assigned to the
<body>
tag for the file called
leftfo-
cus.html
. As soon as focus goes into this window (frame), the handler's function
called
focus_on_me()
is called.
12
An
onBlur
event handler is assigned to the
<body>
tag for
leftfocus.html
. When fo-
cus leaves this frame (i.e., the user clicks the mouse in another window), the func-
tion called
defocus_me()
is called. The output is shown in Figure 13.6.
