Java Reference
In-Depth Information
event.srcElement.className = “”;
}
}
For
mouseover
events, you change the paragraph's CSS class to
underline
. If the event type is
mouseout
, then the element's
className
property is set to an empty string — returning the text to
its original style.
The next bit of code displays the mouse pointer's location if the mouse button was clicked.
if (event.type == “click”)
{
alert(“You clicked the mouse button at the X:”
+ event.clientX + “ and Y:” + event.clientY + “ coordinates”);
}
}
If you compare Example eight with Example nine, you will notice the two primary differences are how
the event information is accessed, and how to retrieve the element that caused the event to occur. Most
everything else is shared between the standard DOM event model and IE's event model.
In the next section, you'll learn how to handle the fundamental differences between both event models
and write cross-browser DHTML code.
Writing Cross-Browser DHTML
By now you've written two versions of the same DHTML script: one for IE and one for browsers that
support the standard DOM event model (Firefox, Safari, Chrome, and Opera). In the real world, creating
separate versions of web sites is rarely considered best practice, and it's much, much easier to write a
cross-browser version of the web page. In this section, you'll use the knowledge you've gained of the
DOM, the standard DOM event model, and IE's event model to write a cross-browser DHTML script.
This script will consist of a tab strip containing three tabs. Clicking any tab dynamically adds content to
the web page. It is a very crude and incomplete tab strip. You'll have the opportunity to add more func-
tionality to it for one of this chapter's questions.
Try It Out A Crude, Cross-Browser Tab Strip
Open your text editor and type the following:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Chapter 12: Example 10</title>
<style type=”text/css”>
.tabStrip
{
