6 The className property is used to reference the CSS class named red, defined in the document.. 7 The className property is used to reference the CSS class named blue, defined in the
Trang 114.11.4 The className Property
The className property is used to reference a CSS class The className property is
defined for all HTML elements With the className property, you can change an element
dynamically by assigning it the name of a class defined in a CSS Example 14.32 contains
a CSS with three classes
3 If the zIndex of the object evaluates to 100, it must be at the top of the stack,
be-cause that is as high as the stack gets
4 This sets the stack level of the zIndex to 2, causing it to move toward the bottom of the
stack
5 If the zIndex for the object is not 3, it is not at the top Its zIndex will be set to 100,
moving it to the top of the stack
6 The object is moved to the bottom of the stack with a zIndex of 0.
7 The <span> tag is used to create a rectangular red box on the screen With a zIndex
of 0, it will be positioned at the bottom of the stack
8 When the user clicks the button, the onClick event is triggered, and the handler
function, moveUp(id), is called.
9 A yellow rectangular box is created with the <span> tag With a zIndex of 1, it will
be positioned above the last block in the stack
10 A blue square box is created with the <span> tag With a zIndex of 2, it will be
po-sitioned above the last block in the stack
11 A small white rectangular box is created with the <span> tag With a zIndex of 3,
it will be positioned at the top of the stack See Figure 14.36
Figure 14.36 The original configuration of the four rectangles (left); after manipulating the
rectangles by reassigning the z-index (right).
E X P L A N A T I O N
Trang 2E X A M P L E 1 4 3 2
<html>
<head><title>Coloring Text</title>
<style type="text/css">
body { background-color: yellow;
font-size: 22pt;
font-weight: bold;
}
1 .red { color:rgb(255,0,0); /* Defining classes */
font-style: verdana;
font-size: 32;
}
font-style: verdana;
font-size: 36;
}
font-style: verdana;
font-size: 40;
}
</style>
<script type="text/javascript">
function init(){
div1=document.getElementById("first");
div2=document.getElementById("second");
div3=document.getElementById("third");
}
div1.style.left = 50;
div1.style.top = 50;
6 div1.className="red";
div2.style.left = 100;
div2.style.top = 100;
7 div2.className="blue";
div3.style.left = 150;
div3.style.top = 150;
8 div3.className="green";
}
</script>
</head>
<body>
9 <div id="first" style="position:absolute; top:50px">It's a
one,</div>
<div id="second" style="position:absolute; top:100px">and a two,</div>
Continues
Trang 3<div id="third" style="position:absolute; top:150px">and three!</div>
<form>
<input type="button" value="move and color text"
10 onClick="colorText()">
</form>
</body>
</html>
E X P L A N A T I O N
1 A CSS class for a style is defined Text will be a red, Verdana font, point size 32
The rgb (red, green, blue) color is used here for demonstration It would be easier
to just assign red to the color property.
2 A CSS class for another style is defined The text will be a blue, Verdana font, point
size 36
3 A CSS class for a third style is defined The text will be a green, Verdana font, point
size 40 Notice that each class not only changes the color of the font, but increases
its point size
4 When the onload event handler is triggered, just after the document has been
loaded, the user-defined init() function is called The getElementById() method
re-turns references to three div objects.
5 A function called colorText() is defined It sets the position of the div containers
and defines the color for the text in each container
6 The className property is used to reference the CSS class named red, defined in
the document
7 The className property is used to reference the CSS class named blue, defined in
the document
8 The className property is used to reference the CSS class named green, defined in
the document
9 The positions for each of the div containers are defined.
10 When the user clicks this button, the onClick event is triggered It invokes the
col-orText() function, which will move and change the text in each of the div
contain-ers The output is displayed in Figures 14.37 and 14.38
E X A M P L E 1 4 3 2 (C O N T I N U E D)
Trang 414.11.5 Drop-Down Menus and Tooltips
Drop-down menus are commonly used in Web pages to create submenus that appear
and then disappear when no longer needed A tooltip is a small box of text that appears
near an object when the mouse moves over the object The text in the box (which can
also contain an image) usually contains a brief text message pertaining to the object
Both drop-down menus and tootips use the visibility property to bring the object into
view and then make it disappear depending on a user-initiated event
Figure 14.37 The initial appearance of the document (left); after clicking the button, the
color, position, and size of the text is changed (right).
Figure 14.38 If text will not move in Internet Explorer and you see the security warning, click
the x and turn it off.
Trang 5The visibility Property. The visibility property lets you hide an object and then bring
it back into view You can also use the visibility property to determine the state: Is it
“vis-ible” or “hidden”? This property is useful when creating interfaces such as drop-down
menus, slideshows, and popups or tooltips.4 In Example 14.34, when the user clicks on
one of the links in the main menu, a drop-down menu will appear If the user rolls the
mouse over the drop-down menu, it will be hidden from view Each of the drop-down
menus is defined within a <div> container.
4 The visibility property applies to an entire object The clip property allows you to designate how much of
an element will be visible
E X A M P L E 1 4 3 3
/* this style sheet is in a file called dropdown.css */
1 a { font-family: verdana, arial;
text-decoration: none;
font-weight: bold;
margin-left: 4px; } /*link style for main menu*/
.linkstyle { color: #f33;}
2 #menu, menu { font-stye: verdana;
font-size:10pt;
color:black; } /* link style for drop-down menu */
3 #menu { position:absolute;
text-decoration:underline;
top:40px;
border-style:solid;
border-width:1px;
padding: 5px;
background-color:yellow;
width:75px;
color: black;
font-size: 12pt;
5 #menu2 { position:absolute;
text-decoration:underline;
top:40px;
left:3.2cm;
border-style:solid;
border-width:1px;
padding: 5px;
background-color:orange;
width:80px;
color: black;
font-size: 12pt;
visibility:hidden;
}
Trang 66 #menu3 { position:absolute;
text-decoration:underline;
top:40px;
left:6.2cm;
border-style:solid;
border-width:1px;
padding: 5px;
background-color:pink;
width:80px;
color: black;
font-size: 12pt;
visibility:hidden;}
7 /* End of style sheet */
E X A M P L E 1 4 3 4
<html>
<head><title>Drop-Down Menu</title>
<link rel="stylesheet" href="dropdown.css"type="text/css"/>
<script type="text/javascript">
8 function showMenu(id){
9 var ref = document.getElementById(id);
10 ref.style.visibility = "visible"; // Make the drop-down
// menu visible }
11 function hideMenu(id){
12 var ref = document.getElementById(id);
13 ref.style.visibility = "hidden"; //Hide the drop-down menu
}
</script>
</head>
<body bgColor="lightblue">
14 <table width="350" border="2" bgcolor="lightgreen"
cellspacing="1" cellpadding="2">
<tr>
15 <td width="100">
16 <div id="menu" onClick="hideMenu('menu');">
<a class="menu" href="#">US</a><br />
<a class="menu" href="#">World</a><br />
<a class="menu" href="#">Local </a><br />
</div>
17 <a href="#" onMouseOver="showMenu('menu');">News</a>
</td>
Continues
E X A M P L E 1 4 3 3 (C O N T I N U E D)
Trang 7<td width="100">
<div id="menu2" onClick="hideMenu('menu2');">
<a class="menu" href="#">Basketball</a><br />
<a class="menu" href="#">Football</a><br />
<a class="menu" href="#>">Soccer</a><br />
</div>
18 <a href="#" onMouseOver="showMenu('menu2');">Sports</a>
</td>
<td width="100">
<div id="menu3" onClick="hideMenu('menu3');">
<a class="menu"
href="http://www.imdb.com/">Movies</a><br />
<a class="menu" href="#">Plays</a><br />
<a class="menu" href="#>">DVD's</a><br />
</div>
19 <a href="#"
onMouseOver="showMenu('menu3');">Entertainment</a>
</td>
20 </tr>
</table>
</body>
</html>
E X P L A N A T I O N
1 The a selector is followed by the style definition for the links that appear in the
main menu
2 An ID selector and a class are defined This style will be used on links in the
drop-down menus
3 This ID selector defines the style of the first drop-down menu When the user
clicks the News link, this yellow drop-down menu will appear directly under the
table cell containing the News link
4 Initially, the first drop-down menu is hidden from view.
5 This ID selector defines the style of the second drop-down menu It will be orange
and drop down directly under the Sports link
6 This ID selector defines the style of the third drop-down menu It will be pink and
drop down directly under the Entertainment link
7 The CSS ends here, and the JavaScript program begins on the next line
8 A function called showMenu is defined Its only parameter is the id attribute of a
div object, that is, the ID of one of the three drop-down menus.
E X A M P L E 1 4 3 4 (C O N T I N U E D)
Trang 89 The getElementById() method returns a reference to the div object that contains
the drop-down menu
10 The visibility property is set to visible The drop-down object comes into view,
right below the main menu item where the user clicked the link
11 A function called hideMenu() is defined Its only parameter is the id attribute of a
div object When this function is invoked, the drop-down menu being referenced
will be hidden from view.
12 The getElementById() method returns a reference to the div object that contains
the drop-down menu
13 The visibility property is set to hidden The object being referenced disappears
from view
14 An HTML table is defined It will be light green, 350 pixels wide, and contain one
row and three data cells
15 The first cell of the table contains a <div> container that is positioned and styled
by the CSS #menu ID selector If the user clicks from within this tag, it will be
hid-den from view If he or she clicks a link in the drop-down menu, the user will be
directed to a Web site
16 The links within the <div> container are described by the CSS menu class The
links are deactivated for this example
17 When the user rolls the mouse onto this link called News, the onMouseOver event
will be triggered A function called showMenu will be invoked, causing the
drop-down menu to appear
18 The second drop-down menu is created and will be made visible when the user
rolls the mouse over the Sports link
19 Like the other two links, the Entertainment link also has a drop-down menu
as-sociated with it, which will be made visible when the user rolls the mouse over it,
and made invisible when the user clicks on the drop-down list
20 The table row and table are closed See Figure 14.39
E X P L A N A T I O N (C O N T I N U E D)
Trang 9Tooltips. The following example uses the visibility property to hide the text in the
tooltip until the user rolls the mouse over the image
Figure 14.39 A drop-down menu controlled by mouse actions.
E X A M P L E 1 4 3 5
<html>
<head><title>A tool tip</title>
<style type="text/css">
body { background-color:black;}
1 #divclass { font-size:12pt;
font-family: arial;
font-weight: bold;
background-color:aqua;
border:thin solid;
width: 210px;
height:40px;
position:absolute;
top: 50px;
left: 175px;
}
Trang 104 a { font-family: cursive;
font-size: 18pt;
font-weight: bold;
color:white;
position: absolute;
left: 60px;
}
5 img { position:absolute; top: 50px; z-index:0; }
</style>
<script type = "text/javascript">
var div1;
div1=document.getElementById("divclass");
}
7 function showHideTip(e) {
8 if(e.type == "mouseover"){
div1.style.visibility="visible";
}
9 else if(e.type == "mouseout"){
div1.style.visibility="hidden";
} }
</script>
</head>
10 <body onLoad="init();">
11 <a href="http://www.servant.xxx"
12 onMouseover="showHideTip(event);"
13 onMouseout="showHideTip(event);"
>At Your Service!
</a>
<br />
14 <img src="waiter.gif">
15 <div id="divclass">Always tip me at least 20%!</div>
</body>
</html>
E X P L A N A T I O N
1 A CSS style is defined for the ID selector, #divclass to create a tooltip.
2 The visibility property for this style is set to hidden; it will not be seen.
3 The z-index property is set to 1, putting it above the image that is set to z-index 0
Re-member, the higher the z-index number, the higher the element is placed on the stack.
4 The style for a link is defined
5 A style for positioning an image is defined Its z-index is 0, placing it below any
other elements
Continues
E X A M P L E 1 4 3 5 (C O N T I N U E D)
Trang 116 The init() function is defined to get the ID of a div element In this example, this
will be the ID for the tooltip
7 The showHideTip() function is defined It takes one parameter, a reference to an
event object It contains information about the event that caused this function to
be called
8 If the event was caused by the mouse going over the link, a mouseOver event, then
the tooltip will be made visible
9 If the event was caused by the mouse moving away from the link, a mouseOut
event, then the tooltip will be hidden from view
10 As soon as the document has finished loading, the onLoad event is triggered, and
the init() function invoked.
11 This is the link that displays as “At Your Service!” Rolling the mouse over it will
cause the tooltip to appear
12 The onMouseOver event is triggered when the user puts the mouse on the link
The tooltip will be shown
13 When the user moves the mouse away from the link, the tooltip disappears
14 The image for the waiter is below the tooltip, because its z-index is 0, whereas the
tooltip’s z-index is 1.
15 The <div> container is used to hold the tooltip text and style defined by the CSS
ID selector called divclass The output is shown in Figure 14.40.
Figure 14.40 Before the mouse moves over the link (left), and after (right) when tooltip
appears.
E X P L A N A T I O N (C O N T I N U E D)