Dynamic HTML and the W3C Document Object Model - Beginning JavaScript - page 452

Event and MouseEvent objects easily (as you'll see later with the type property). Next, you assign the
srcElement object to the eSrc variable. If the browser isn't a version of IE, then assign the DOM Event
object's target property to eSrc. Regardless of the browser used to view this page, you now have a
reference to the element that caused the event to occur with the eSrc variable.
Now you need to determine what type of event took place and make the appropriate changes to the
DOM. First, check for the mouseover event.
if (e.type == “mouseover”)
{
if (eSrc.className == “tabStrip-tab”)
{
eSrc.className = “tabStrip-tab-hover”;
}
}
If the element that caused the event has a class name of tabStrip-tab, a tab in its normal state, then
change the element's className property to tabStrip-tab-hover. In doing so, the tab is now in the
hover state.
If a mouseout event occurred, you also need to make changes to the DOM.
if (e.type == “mouseout”)
{
if (eSrc.className == “tabStrip-tab-hover”)
{
eSrc.className = “tabStrip-tab”;
}
}
This code changes the tab's className property to tabStrip-tab (the normal state) only when the tab
the mouse pointer exited is in the hover state.
The last event you need to look for is the click event, so check for it now with the following code:
if (e.type == “click”)
{
if (eSrc.className == “tabStrip-tab-hover”)
{
eSrc.className = “tabStrip-tab-click”;
This code changes the tab element's className to tabStrip-tab-click, thus putting it into the click
state. Next, you need to add the tab's description to the page, and you start this process by getting the
tab's number from the <div/> element's id attribute. Remember the id values for the tab elements are
in the format of tabStrip-tab-1. So all you need to retrieve is the number of the tab. Do so by using
the substr() method.
var num = eSrc.id.substr(eSrc.id.lastIndexOf(“-”) + 1);
showDescription(num);
}
}
}