| Table of Contents | Previous Next |
6.3 Changing text attributes with mouse over6.3.1 Highlighting text with a dynamic background colorAnother popular technique on the Web is to change text background color dynamically when the mouse moves over it. This is often used to highlight options or selected items so that the visitor knows what he or she is choosing. It also has the so-called "getting the attention" effect. By using style (CSS style) and the DOM structure, changing text colors (whether foreground or background) can be done in an elegant way. Suppose you have a CSS style class called .text01 as listed in ex06-04.txt:
Listing: ex06-04.txt
1: <style>
2: .text01 {
3: font-size:16pt;
4: font-family:arial,sans-serif;
5: color: green;
6: background-color:white
7: }
8: </style>
Any attributes or properties inside this style can be accessed and changed by using the this.style operator. For example, the following code is used to change the background color when a mouse runs over it: Listing: ex06-05.txt 1: <span class="text01" 2: onmouseover='this.style.backgroundColor="#ffaaaa"' 3: onmouseout='this.style.backgroundColor="white"'> 4: Practical XHTML </span> Line 1 uses <span> with style class class="text01". This style contains typeface font, size, and color settings used to display the message in line 4. Since we assume mouse events are supported by the browser on the element <span>, attributes onmouseover and onmouseout are used directly in lines 23. The purpose of this.style is to identify this element and backgroundColor property to change the background color. As a complete example, you can now add more items and highlight the changing background colors.
Example: ex06-07.htm - Highlight Item By Mouse Over
1: <?xml version="1.0" encoding="iso-8859-1"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head>
6: <title> Highlight Item By Mouse Over - ex06-07.htm </title>
7: </head>
8: <style>
9: .text01
10: {
11: font-size:16pt;
12: font-family:arial,sans-serif;
13: color: green;
14: background-color:white
15: }
16: </style>
17: <body>
18: <span class="text01" style="color:black">Practical Web Technologies<br />
19: <br />   
20: <span class="text01"
21: onmouseover='this.style.backgroundColor="#ffaaaa"'
22: onmouseout='this.style.backgroundColor="white"'>
23: Practical XHTML</span><br />
24: <span class="text01"
25: onmouseover='this.style.backgroundColor="#ffaaaa"'
26: onmouseout='this.style.backgroundColor="white"'>   
27: Practical Programming Techniques For The Web</span><br />
28: <span class="text01"
29: onmouseover='this.style.backgroundColor="#ffaaaa"'
30: onmouseout='this.style.backgroundColor="white"'>   
31: Server CGI Techniques For Web Business</span><br />
32: <span class="text01"
33: onmouseover='this.style.backgroundColor="#ffaaaa"'
34: onmouseout='this.style.backgroundColor="white"'>   
35: Web Development With DOM and DHTML</span>
36: </body>
37: </html>
This XHTML page will work on W3C-compatible browsers such as the latest IE and NS since they share the same DOM structure to access the CSS properties. Some of the screen displays are captured in Figs 6.9 and 6.10. Figure 6.9. Dynamic background I
Figure 6.10. Dynamic background II
6.3.2 Changing text sizes and fonts on the fly with the style objectFrom the discussion above, it is clear that in order to change the properties of a CSS class, you need to find the corresponding property names in events. To access CSS styles and properties, the style object inside the browser can be used. Almost all properties in a CSS sheet can be accessed and changed via this "style" object. This is why we have the word style inside the this.style.backgroundColor statement used in our previous examples. This style object has a long list of properties and therefore only a simple table related to fonts and colors is given in Table 6.3.
With this table, it should be quite easy to rewrite example ex06-04.htm to change font sizes and colors on the fly. 6.3.3 CSS class name swappingUsing the style object is a convenient way to change one or two CSS properties at one time. If you don't want to use script functions, then to change more than two CSS properties via onmouseover could be quite annoying. Don't forget that you may need to change them back to their originals when onmouseout is true. It is much better if we can have a simple way to swap two CSS class names. This can be done by the this operator and className attribute as described in the next example. Consider the following page with five style classes. Each of them has a set of specific settings to catch the visitor's attention.
Example: ex06-08.htm - Swapping Class Name When Mouse Over
1: <?xml version="1.0" encoding="iso-8859-1"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head>
6: <title>Swapping Class Name When Mouse Over - ex06-08.htm </title>
7: </head>
8: <style>
9: .text01 {font-size:16pt; font-family:arial,sans-serif;color:green;}
10:
11: .text02 {font-size:26pt; font-family:arial,sans-serif;color:red;}
12:
13: .text03 { font-size:18pt; font-family:Times,sans-serif;color:blue;
14: font-style: italic; background-color:#ffaaaa}
15:
16: .text04 { font-size:18pt; font-family:Times,sans-serif;color:#ff00ff;
17: position: relative; left: 100px }
18:
19: .text05 { font-size:18pt; font-family:Times,sans-serif;color:#000088;
20: position: relative; top: 20px }
21: </style>
22: <body>
23: <span id="part1" class="text01" style="color:black">
24: Practical Web Technologies<br /><br />   
25:
26: <span class="text01"
27: onmouseover='this.className="text02"'
28: onmouseout='this.className="text01"'>
29: Change To Bigger
30: </span><br />   
31:
32: <span class="text01"
33: onmouseover='this.className="text03"'
34: onmouseout='this.className="text01"'>
35: Change To Blue and Italic
36: </span><br />   
37:
38: <span class="text01"
39: onmouseover='this.className="text04"'
40: onmouseout='this.className="text01"'>
41: Jump To Left
42: </span><br />   
43:
44: <span class="text01"
45: onmouseover='this.className="text05"'
46: onmouseout='this.className="text01"'>
47: Going Down!</span>
48: </body>
49: </html>
Between lines 8 and 21, we have five style class specifications:
Next, four paragraphs are defined with text01 as primary class names and change to other class names when a mouse passes over them. The purpose of the statement this.className=xxx is to swap the class and accomplish the task. Some screen shots are listed in Figs 6.116.14. Figure 6.11. Mouse over first item
Figure 6.14. Mouse over fourth item
Figure 6.12. Mouse over second item
Figure 6.13. Mouse over third item
6.3.4 Output text with mouse overTo be able to change the texts (or messages) on the screen dynamically or, more precisely, to change the contents of an XHTML element to achieve a certain purpose is important for many applications. This feature not only can improve the look, clarity, and sophistication of a Web page, but also can be used to develop a so-called hyper help or hyper explanation system. Basically this technique starts from one thing: when a mouse runs over certain items, more information will be displayed on a specific area. For a simple example, consider the following code:
Example: ex06-09.htm - Output Text When Mouse Over
1: <?xml version="1.0" encoding="iso-8859-1"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head>
6: <title> Output Text When Mouse Over - ex06-09.htm </title>
7: </head>
8: <style>
9: .text01 {font-size:48pt; font-family:arial,sans-serif;
10: text-align:center;color: red;font-weight:bold}
11:
12: .text02 {font-size:48pt; font-family:arial,sans-serif;
13: text-align:right;color: green;font-weight:bold}
14: </style>
15: <body>
16:
17: <span class="text01"
18: onmouseover="this.innerHTML='Got You!'"
19: onmouseout="this.innerHTML='Touch Here!'">
20: Touch Here!</span>
21:
22: <br /><br /><br /><br />
23:
24: <div class="text02"
25: onmouseover="this.innerHTML='Thank You!'"
26: onmouseout="this.innerHTML='Touch Here!'">
27: Touch Here!</div>
28: </body>
29: </html>
This page generates two paragraphs with the messages "Touch Here!" on the left and another "Touch Here!" on the right as indicated in lines 19 and 26 respectively (see Figs 6.15 and 6.16). These two messages have the CSS class names text01 and text02 in the usual way. The interesting part is line 18 onmouseover="this.innerHTML='Got You!'" Figure 6.15. ex06-09.htm
Figure 6.16. Mouse over second message
This statement is activated when a mouse runs over the first message defined in line 18. The this operator together with the property innerHTML will change the content of our first message to "Got You!" instantly. Although the keyword innerHTML is not W3C approved, it is popular and will allow XHTML elements to be embedded in the message. For <span>, you need to touch the message itself in order to make a change. For <div>, changes are made as soon as you touch the line (the whole line). As good practice, you also need to change the message back to its original form when the mouse leaves the message region. We'd like to point out again that the property innerHTML is not part of the W3C standard recommendation. However, most major browsers support this property due to its popularity in industry. 6.3.5 A simple text message boardTo demonstrate the usefulness of output text in a real application, let's consider a message board technique. This technique involves a message board with some items (or menu). When a mouse runs over an item, the board will display an appropriate message. This is a very common technique in Web sites that are related to the zodiac. They usually use different table shapes and pictures to represent the twelve groups of stars. Of course we are not going to talk about the zodiac here. Instead we want to show you how to implement a simple message board. Our board has five rows and two columns arranged as shown in Fig. 6.17. Figure 6.17. Message board diagram
The first row occupies two columns. The second row, second column is the display board itself. The board occupies four rows. These can be done by table attributes colspan=2 and rowspan=4 respectively. When a mouse runs over, for example, the first item "XHTML," the following message is displayed: Extensible Hyper Text Markup Language:- A Basic Language on the Web for publishing In addition, each line of the message will have a different style. For that two texture mappings covering the board are used to achieve a more realistic effect. The message board has the layout and functionalities as shown in Figs 6.18 and 6.19. Figure 6.18. ex06-18.htm
Figure 6.19. Mouse over XHTML
The following code fragment defines the first table item "XHTML":
Listing: ex06-06.txt
1: <tr><td style="background:url('texture03.jpg');width:80px;height:80px">
2: <span id="htm" class="text01"
3: onmouseover='mouse_over("htm,"t_html)'
4: onmouseout='mouse_out("htm,"t_default)'>XHTML</span></td>
This code fragment contains two user-defined script functions to handle the mouse events. The function mouse_over("htm," t_html) in line 3 takes two arguments, one for the item identity and the other for the message to be displayed. The message t_html is a variable containing a combination of XHTML elements and is passed to the function for displaying. The script function mouse_over() is defined by
Listing: ex06-07.txt
1: function mouse_over(var_id, str_var)
2: {
3: document.getElementById(var_id).style.color="red";
4: document.getElementById("h_2").innerHTML=str_var;
5: }
Since the W3C standard strongly recommends the use of getElementById feature, here is an example to demonstrate how to use it for argument passing. The first statement of the function (line 3) is to get the identity of the input element (i.e., var_id) and to change the text color to red. The second statement in line 4 will output the string (i.e., str_var) to the XHTML element with an identity h_2. The innerHTML is to confirm that the output string (or str_var) may contain XHTML language elements. Since the getElementById feature is standard, more structured, and highly recommended by the W3C authority, we will use it frequently.
Example: ex06-10.htm - A Text Message Board
1: <?xml version="1.0" encoding="iso-8859-1"?>
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
3: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
5: <head>
6: <title> A Text Message Board - ex06-10.htm </title>
7: </head>
8:
9: <style>
10: .text00 {font-size:16pt; font-family:arial,sans-serif;
11: font-weight:bold; color: #00ff00;}
12: .text01 {font-size:16pt; font-family:arial,sans-serif;
13: font-weight:bold;color: #00ffff; }
14: h3 {font-size:16pt; font-family:arial,sans-serif;
15: font-weight:bold; color: #ffff00; position:relative;left:10;top:10}
16: h4 {font-size:16pt; font-family:arial,sans-serif;
17: font-weight:bold; color: #ffffff; position:relative;left:10;top:10}
18: </style>
19:
20: <script>
21: t_default = "<h3><b>Term Explanation is here:- </b></h3>";
22: w_html="<h3><br /><b>Extensible Hyper Text Markup Language:- </b></h3>";
23: p_html="<h4><b>A Basic Language on the Web <br />for publishing</b></h4>";
24: t_html = w_html + p_html;
25: w_css="<h3><br /><b>Cascading Style Sheet:- </b></h3>";
26: p_css="<h4><b>Used to define the properties of HTML elements</b></h4>";
27: t_css = w_css + p_css;
28: w_dom="<h3><br /><b>Document Object Model:- </b></h3>";
29: p_dom="<h4><b>A Structure To Access Web Elements</b></h4>";
30: t_dom = w_dom + p_dom;
31: w_w3c="<h3><br /><b>World Wide Web Consortium:- </b></h3>";
32: p_w3c="<h4><b>Authority To Set The Web Standard</b></h4>";
33: t_w3c = w_w3c + p_w3c;
34:
35: function mouse_over(var_id, str_var)
36: {
37: document.getElementById(var_id).style.color="red";
38: document.getElementById("h_2").innerHTML=str_var;
39: }
40:
41: function mouse_out(var_id, str_var)
42: {
43: document.getElementById(var_id).style.color="#00ffff";
44: document.getElementById("h_2").innerHTML=str_var;
45: }
46: </script>
47:
48: <body style="background:#ffffff"><br />
49: <div align="center">
50: <table width="450" border="2" cellspace="5"><tbody align="center">
51: <tr><td colspan="2"
52: style="background:url('texture03.jpg');height:80px">
53: <span class="text00">
54: <b>A Simple Message Board</b></span></td></tr>
55:
56: <tr><td style="background:url('texture03.jpg');width:80px;height:80px">
57: <span id="htm" class="text01"
58: onmouseover='mouse_over("htm",t_html)'
59: onmouseout='mouse_out("htm",t_default)'>XHTML</span></td>
60:
61: <td rowspan=4 id="h_2" style="background:url('texture01.jpg');
62: width:350px;text-align:left;vertical-align:top">
63: <span id="h_2">
64: <h3>Term Explanation is here:- </b></h3></span></td></tr>
65:
66: <tr><td style="background:url('texture03.jpg');width:80px;height:80px">
67: <span class="text01" id="css"
68: onmouseover='mouse_over("css",t_css)'
69: onmouseout='mouse_out("css",t_default)'>CSS</span></td></tr>
70:
71: <tr><td style="background:url('texture03.jpg');width:80px;height:80px">
72: <span class="text01" id="dom"
73: onmouseover='mouse_over("dom",t_dom)'
74: onmouseout='mouse_out("dom",t_default)'>DOM</span></td></tr>
75:
76: <tr><td style="background:url('texture03.jpg');width:80px;height:80px">
77: <span class="text01" id="w3c"
78: onmouseover='mouse_over("w3c",t_w3c)'
79: onmouseout='mouse_out("w3c",t_default)'>W3C</span></td></tr>
80: </tbody>
81: </table></div>
82: </body>
83: </html>
Instead of using script functions, another alternative is to put everything inside the onmouseover and onmouseout event handlers. For example, lines 5859 in ex06-10.htm can be replaced by ex06-08.txt.
Listing: ex06-08.txt
1: onmouseover='this.style.color="red";
2: document.getElementById("h_2").innerHTML=t_html'
3: onmouseout='this.style.color="#00ffff";
4: document.getElementById("h_2").innerHTML=t_default'>XHTML</span></td>
The statement in line 1 changes the element color to red, and continues to execute the statement in line 2 to display the message in the board. The semi-colon at the end of line 1 is used to separate two executable statements. The use of script functions will usually make the code clearer and can also handle more complex problems. With minimal modifications, this example can output images to form an image display board. 6.3.6 An image display boardYou can use the skeleton of our previous example ex06-10.htm and convert it to an image display board (i.e., ex06-11.htm). First, you need to make a copy of ex06-10.htm and call it the ex20-11.htm. The next step is to replace lines 2034 in ex06-10.htm by the six lines in ex06-09.txt. Listing: ex06-09.txt 1: <script> 2: t_default = "<img src='logo_web.jpg' />"; 3: t_pic1 = "<img src='title4.gif' />"; 4: t_pic2 = "<img src='chengs.gif' />"; 5: t_pic3 = "<img src='boom.gif' width='280' height='220' />"; 6: t_pic4 = "<img src='pumkin.gif' width='280' height='220' />"; As you can see, this listing contains one default image and four animated GIF pictures. These GIF pictures are integrated inside the string variables t_pic1 to t_pic4. To handle the picture with the mouse, you replace lines 5659 of ex06-10.htm by the four lines in listing ex06-10.txt.
Listing: ex06-10.txt
1: <tr><td background="texture03.jpg" width="80" height="80">
2: <span id="pic1" class="text01"
3: onmouseover='mouse_over("pic1",t_pic1)'
4: onmouseout='mouse_out("pic1",t_default)'>Pic 1</span></td>
This code defines the second row and first column of the board and displays the text pic1 inside it. When a mouse runs over this text, the code in line 3 will change the color of the text to red and output the XHTML statement stored in string variable t_pic1. Since the string t_pic1 contains an image element <img> (see line 3 of ex06-09.txt), the innerHTML will render it correctly inside the display board. To get a better layout for the image, the left and top attributes (see line 62) of ex06-10.htm are set as the center and middle respectively. If you activate the page ex06-11.htm, you will obtain Figs 6.20 and 6.21. Figure 6.20. ex06-11.htm
Figure 6.21. Mouse over pic1
|
| Table of Contents | Previous Next |
