Java Reference
In-Depth Information
border: 1px solid #316AC5;
background-color: #C1D2EE;
padding: 2px;
}
This rule reduces the padding to two pixels, adds a one-pixel-wide border, and changes the background
color to a shade of blue. Borders, like padding, add to the actual dimensions of an element; reducing the
padding while adding a border keeps the element in a hover state the same height and width as it was
in the normal state.
The fi nal rule declares the tabStrip-tab-click class.
.tabStrip-tab-click
{
border: 1px solid #facc5a;
background-color: #f9e391;
padding: 2px;
}
This class is similar to the hover class; the only difference is the dark orange border color and light
orange background color.
Now let's look at the JavaScript code that performs the magic. The code consists of the handleEvent()
function, which is assigned to the document object's onmouseover, onmouseout, and onclick event
handlers.
document.onclick = handleEvent;
document.onmouseover = handleEvent;
document.onmouseout = handleEvent;
The function begins by declaring a variable called
eSrc
(short for element source; it doesn't matter what
you call this variable as long as it's meaningful to you). This variable should contain the
srcElement
and
target
properties for IE and browsers that implement the DOM event model, respectively.
function handleEvent(e)
{
var eSrc;
if (window.event)
{
e = window.event;
eSrc = e.srcElement;
}
else
{
eSrc = e.target;
}
After the variable declaration, you check for the window.event object to determine which event model
the browser implements. If window.event exists, then the browser is IE, and you assign the e variable
to hold a reference to the window.event object. Remember that e is defi ned as a parameter to the func-
tion, and since IE doesn't pass a parameter to event handlers, it is undefi ned. Assigning it a reference
to window.event allows you to use the properties shared between the IE event object and the DOM
