Java Reference
In-Depth Information
Try It Out Using the className Property
Let's revisit the code from
ch12_examp4.htm
from the previous section and make some revisions.
<!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 5</title>
<style type=”text/css”>
.defaultStyle
{
font: normal 12pt arial;
text-decoration: none;
}
.newStyle
{
font: italic 12pt arial;
text-decoration: underline;
}
</style>
<script type=”text/javascript”>
function divAdvert_onMouseOver()
{
var divAdvert = document.getElementById(“divAdvert”);
divAdvert.className = “newStyle”;
}
function divAdvert_onMouseOut()
{
var divAdvert = document.getElementById(“divAdvert”);
divAdvert.className = “defaultStyle”;
}
</script>
</head>
<body>
<div id=”divAdvert” class=”defaultStyle” onmouseover=”divAdvert_onMouseOver()”
onmouseout=”divAdvert_onMouseOut()”>
Here is an advertisement.
</div>
</body>
</html>
Save this fi le as ch12_examp5.htm. This page behaves in the exact same manner as ch12_examp4.htm.
When you place your mouse pointer over the text, it becomes italicized and underlined; when you move
your pointer off of the text, it changes back to normal.
There are a few key differences between this HTML page and the one created using the
style
object.
For starters, the
#divAdvert
style rule is removed and replaced with two CSS classes:
.defaultStyle
{
font: normal 12pt arial;
text-decoration: none;
