Приглашаем посетить
Чуковский (chukovskiy.lit-info.ru)

6.2 Beginning mouse over (or rollover)

Table of Contents

Previous Next

6.2 Beginning mouse over (or rollover)

6.2.1 My first mouse-over page

In this section, a mouse-over technique that will work on all major browsers and versions is introduced. Our first mouse-over (or rollover) HTML page will display a picture. This picture will change to another one when a mouse runs over it. You are bound to have seen lots of Web pages with this feature and may wonder how they do it. You may be surprised to find out that this can be done by just three lines of code:



Listing: ex06-02.txt

1:     <a href="#" onmouseover='document.my_img.src="rody04.gif"'>
2:        <img alt="pic" id="my_img" name="my_img" src="logo_web.jpg" />
3:     </a>

These lines of code may look strange. Believe it or not, they are very popular among Web professionals. Basically, this is an HTML anchor <a> element that includes an image. The <img> element is used to specify an image to be displayed on a page. Inside this element, a name called my_img is assigned in line 2. The image itself is a JPG picture file called logo_web.jpg. Our page displays this picture when first activated. When you click on this image picture, the anchor element activates the hyper reference and jumps to another page. We have put a # symbol inside the href attribute so that the anchor will not jump to another page. The command



onmouseover

is an intrinsic event provided by HTML/XHTML to handle a mouse-over situation. This is triggered when a mouse runs over the boundary of the element concerned. When the mouse runs over the picture, for example, the following action will be executed:



document.my_img.src = "rody04.gif"

This changes our image resource to a new file called rody04.gif. Since the statement has immediate effect, you will see the change of image in real time. The statement document.my_img is a DOM structure used to identify the XHTML element that we want to change. The interesting part is that we have used an anchor element <a> to trigger the onmouseover. This is because not all browsers support onmouseover on every XHTML element. However, they all support mouse events with anchor. Since the anchor element <a> is used here, this is an all-singing and dancing setting and will work on all major browsers and versions.

To complete this as a working Web page, you can:

  • add a simple header and a basic background color #a0a0ff;

  • set the link, vlink, and alink color as background color to cover the tail of <a>.



Example: ex06-01.htm - My First Mouse Over Page

 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>My First Mouse Over Page - ex06-01.htm</title>
 7:    </head>
 8:    <body bgcolor="#a0a0ff" vlink="#a0a0ff"
 9:            link="#a0a0ff" alink="#a0a0ff">
10:      <div align="center"><br /><br />
11:      <a href="#" onmouseover='document.my_img.src="rody04.gif"'>
12:        <img alt="pic" id="my_img" name="my_img" src="logo_web.jpg" />
13:      </a>
14:      </div>
15:    </body>
16:    </html>

This page will work on major browsers including some of their older versions. Some results are captured in Figs 6.1 and 6.2.

Figure 6.1. ex06-01.htm

graphics/06fig01.jpg


Figure 6.2. When mouse over the picture

graphics/06fig02.jpg


You can add the onmouseout command as in line 13 of ex06-02.htm to change the picture back to its original when a mouse moves out.



Example: ex06-02.htm - My Mouse In And Out Page

 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>My Mouse In and Out Page - ex06-02.htm</title>
 7:    </head>
 8:    <body bgcolor="#a0a0ff" vlink="#a0a0ff"
 9:             link="#a0a0ff" alink="#a0a0ff">
10:      <div align="center"><br /><br />
11:      <a href="#"
12:        onmouseover='document.my_img.src="rody04.gif"'
13:        onmouseout='document.my_img.src="logo_web.jpg"'>
14:      <img alt="pic" id="my_img" name="my_img" src="logo_web.jpg" />
15:     </a>
16:     </div>
17:    </body>
18:    </html>

When the mouse comes out from the picture, the browser will generate an onmouseout event and the statement in line 13 will change the picture back to its original one. If you want the page to have the capability to jump to other pages, you simply add the usual hyperlink inside the href attribute in line 11.

6.2.2 Mouse events supported by browsers and versions

W3C's XHTML standard suggests global support for mouse events on almost all its elements. The latest versions of IE and NS fully implement this recommendation. Some earlier browsers such as NS4.x support very few of them. For professional Web programmers, precautions should be taken when browser differences are essential. For example, the program ex06-02.htm can be written as ex06-03.htm, making use of a more structural approach such as getElementById recommended by the W3C authority.



Example: ex06-03.htm - Mouse Over For IE4+ And N6+ Only

 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> Mouse Over For IE4+ and N6+ Only - ex06-03.htm </title>
 7:    </head>
 8:    <body style="background:#a0a0ff">
 9:    <div align="center"> <br /><br />
10:     <img alt="pic" id="my_img"
11:      src="logo_web.jpg"
12:      onmouseover='document.getElementById("my_img").src="rody04.gif"'
13:      onmouseout='document.getElementById("my_img").src="logo_web.jpg"' />
14:    </div>
15:    </body>
16:    </html>

In this case, both onmouseover and onmouseout are included inside the image element <img>. This program will, of course, work on the latest versions of IE and NS, but fails to run on NS4.x. This is because NS4.x doesn't support mouse events inside image elements and getElementById features. The attribute id="my_img" in line 10 is for identity purposes and ready for the use of getElementById.

It is almost impossible to provide a full account of elements and attributes that support mouse events associated with all browsers and versions. For practical purposes, Table 6.2 lists some of the most popular elements and attributes.

Table 6.2. Mouse events support table

Elements

HTML and XHTML versions

Browsers and versions

Element and attributes

 

3.0

3.2

4.0

4.01

X1.0

 

IE

NS

O

<a href>

 

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

 

4.0+

4.0+

<a name>

 

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

 

4.0+

6.0+

<div>

 

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

 

4.0+

6.0+

<img>

 

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

 

4.0+

6.0+

<input type=button>

 

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

 

4.0+

4.0+

<object>

 

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

 

5.0+

6.0+

<span>

 

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

 

4.0+

6.0+

<table>

 

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

 

4.0+

6.0+

<td>

 

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

 

4.0+

6.0+

<tr>

 

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

6.2 Beginning mouse over (or rollover)

 

4.0+

6.0+

IE Internet Explorer

NS Netscape

O Other browsers

4.0 HTML V.4.0

4.01 HTML V.4.01

X1.0 XHTML V.1.0


From this table, you can clearly see that NS4.x does not support onmouseover events with the image element <img>. In fact, in the case of mouse events, NS4.x supports very few XHTML elements. If you want to write a page that is all singing and dancing, the anchor <a href="#"..> technique as demonstrated in example ex06-02.htm is quite useful. In the next section, we will use the same technique to develop a simple art gallery page for all major browsers with no detection code needed.

6.2.3 A simple art gallery

In this section, we consider a Web page to display a series of cyber art with browser backward compatibility. For simplicity, only one page of art with six animated contents is constructed. In order to have a tabular form, all art contents are organized into a 3x2 XHTML table and use the anchor technique merely to support earlier browsers.

The main structure of the page is a table as shown in the following code (lines 1249):



Example: ex06-04.htm - A Simple Art Gallery

 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 Simple Art Gallery - ex06-04.htm </title>
 7: </head>
 8: <body style="background:#80bb80">
 9: <div align="center">
10: <img alt="pic" src="head.gif" />
11: <img alt="pic" src="line1.gif" width="600" height="6" />
12: <table>
13:  <tr align="center"><td width="300" height="180">
14:   <a href="#" onmouseout='document.item11.src="p_cover.gif"'
15:      onmouseover='document.item11.src="rody04.gif"'>
16:     <img alt="pic" src="p_cover.gif" width="250" height="170" border="0"
17:      id="item11" name="item11" /></a>
18:  </td><td width="300" height="180">
19:   <a href="#" onmouseout='document.item12.src="p_cover.gif"'
20:      onmouseover='document.item12.src="gasty4.gif"'>
21:   <img alt="pic" src="p_cover.gif" width="250" height="170" border="0"
22:      id="item12" name="item12" /></a>
23:  </td></tr>
24:
25:  <tr align="center"><td width="300" height="180">
26:    <a href="#" onmouseout='document.item21.src="p_cover.gif"'
27:        onmouseover='document.item21.src="boom.gif"'>
28:   <img alt="pic" src="p_cover.gif" width="250" height="170" border="0"
29:        id="item21" name="item21" /></a>
30:  </td><td width="300" height="180">
31:    <a href="#" onmouseout='document.item22.src="p_cover.gif"'
32:        onmouseover='document.item22.src="chengs.gif"'>
33:   <img alt="pic" src="p_cover.gif" width="250" height="170" border="0"
34:       id="item22" name="item22" /></a>
35:  </td></tr>
36:
37:  <tr align="center"><td width="300" height="180">
38:    <a href="#" onmouseout='document.item31.src="p_cover.gif"'
39:        onmouseover='document.item31.src="title4.gif"'>
40:   <img alt="pic" src="p_cover.gif" width="250" height="170" border="0"
41:        id="item31" name="item31" /></a>
42: </td><td width="300" height="180">
43:    <a href="#" onMouseOut='document.item32.src="p_cover.gif"'
44:       onMouseOver='document.item32.src="pumkin.gif"'>
45:   <img alt="pic" src="p_cover.gif" width="250" height="170" border="0"
46:        id="item32" name="item32" /></a>
47: </td></tr>
48:
49: </table>
50: </div>
51: </body>
52: </html>

Line 13 defines a table row with alignment at the center and table data <td> with size 300x180 pixels. Inside the table data, there is an anchor element and the usual onmouseover and onmouseout settings to trigger the events. In line 16, the image itself is defined by the <img> element with name identity item11. The second art content of the first row is defined in a very similar manner (lines 1823). Continue to define the table row three times and you will have a 3x2 XHTML table. The collection of art here is just a set of simple animated GIF files.

Because we've added the complication of using the anchor element, this page works on earlier browsers as well as the latest ones. Recall that our initial aim of this chapter is to develop all-singing and dancing mouse-over Web pages that do not need any detection code. The results are shown in Figs 6.3 and 6.4.

Figure 6.3. Art gallery I

graphics/06fig03.jpg


Figure 6.4. Art gallery II

graphics/06fig04.jpg


Now we are beginning to understand why so many Web pages on the Internet actually use the anchor element to deal with mouse-over control. For many cases the anchor element did provide a gateway for backward compatibility. Next, you will see how to use the same technique to change the global background colors of a Web page. After that we will show you how to use a more structural approach (W3C's recommendations) to solve more complex problems.

6.2.4 Changing background color with mouse over

The first global settings that we want to manipulate are the global background colors. Background color is a property inside the document object and can be accessed through the classical bgColor value. This is an immediate process. Any value changes will result an instant update. Our next example shows background color change with mouse over. When the mouse runs over the color region, the global background color changes instantly. The original background color will be restored when the mouse moves out of the color region.



Example: ex06-05.htm - Changing Background Color

 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> Changing Background Color - ex06-05.htm </title>
 7: </head>
 8: <style>
 9:   h3{font-family:arial;font-size:12pt;color:#0000ff}
10: </style>
11:
12: <body bgColor="#eeeeee">
13: <table border="4" align="center" bgColor="#cccccc">
14:  <tr><td colspan="5" align="center">
15:      <h3> Changing Background Color With Mouse Over</h3>
16:     </td></tr>
17:  <tr align="center">
18:   <td width="80" height="28">
19:     <a href="#" onmouseout='document.bgColor="#eeeeee"'
20:                 onmouseover='document.bgColor="#ff0000"'>
21:     <img alt="pic" src="red.gif" width="80" height="28" border="0" />
22:  </a></td>
23:  <td width="80" height="28">
24:    <a href="#" onmouseout='document.bgColor="#eeeeee"'
25:                onmouseover='document.bgColor="#00ff00"'>
26:    <img alt="pic" src="green.gif" width="80" height="28" border="0" />
27:  </a></td>
28:  <td width="80" height="28">
29:    <a href="#" onmouseout='document.bgColor="#eeeeee"'
30:                onmouseover='document.bgColor="#0000ff"'>
31:     <img alt="pic" src="blue.gif" width="80" height="28" border="0" />
32:  </a></td>
33:  <td width="80">
34:    <a href="#" onmouseout='document.bgColor="#eeeeee"'
35:                onmouseover='document.bgColor="#ffff00"'>
36:   <img alt="pic" src="yellow.gif" width="80" height="28" border="0" />
37:  </a></td>
38:  <td width="80">
39:    <a href="#" onmouseout='document.bgColor="#eeeeee"'
40:                onmouseover='document.bgColor="#ff00ff"'>
41:    <img alt="pic" src="pink.gif" width="80" height="28" border="0" />
42:   </a></td>
43: </tr>
44: </table>
45: </body>
46: </html>

Lines 1344, and hence the whole program, are a table with two rows. The first row, lines 1416, is just a header. The second row has five elements. The first element is defined by



18:  <td width="80" height="28">
19:    <a href="#" onmouseout='document.bgColor="#eeeeee"'
20:                 onmouseover='document.bgColor="#ff0000"'>
21:     <img alt="pic" src="red.gif"a width="80" height="28" border="0" />
22:  </a></td>

This is a table cell of 80x28 pixels (line 18). Inside this area is a small picture (a red color picture). The main action is in lines 1920. When a mouse runs over this small picture, the onmouseover will set the bgColor to #ff0000 (red) as indicated in line 20. When the mouse is outside the image region, the onmouseout event (line 19) is activated and restores the global background color. Some of the screen shots are listed in Figs 6.5 and 6.6.

Figure 6.5. When mouse over green

graphics/06fig05.jpg


Figure 6.6. When mouse over yellow

graphics/06fig06.jpg


In general Netscape's browsers are case sensitive and Microsoft's are not. If you use bgcolor instead of bgColor, this example will run on IE but not NS.

A more structural approach recommended by the W3C authority is to use getElementById and the style operator. First, you need to give the document body an id and use a CSS style such as



<body id="body01" style="background-color:#eeeeee">

This id="body01" identifies the body element by getElementById later and changes its background color attribute. You can replace lines 1822 of the previous example by the following listing:



Listing: ex06-03.txt

 1: <tr align="center">
 2: <td style="width:80px;background-color:#ff0000"
 3:  onmouseover=
 4:  'document.getElementById("body01").style.backgroundColor="#ff0000"'
 5:   onmouseout=
 6:  'document.getElementById("body01").style.backgroundColor="#aaaaaa"'>
 7: </td>

Line 2 is table data of size 80 pixels. The background-color setting will set the background color of the table data as red so that we don't need any color image here. Lines 36 are the main actions for the onmouseover and onmouseout commands. Finally getElementById and style are used to change the background color (lines 4 and 6). This approach provides a more structured behavior toward XHTML and Web programming. We will focus more on this approach as recommended by the W3C authority.

6.2.5 Creating background textures

We've already had some experience of textures from Chapter 1. Textures play an important role in Web page design and businesses. A good background texture always gives a good first impression to readers and provides a warm welcome to visitors or potential customers. For some business sectors, this could play a vital part in attracting new customers. Just imagine that you are a Web programmer working for a company selling a large variety of marbles or stones, or a textile company selling fabrics, or an interior design company specializing in flooring texture. You will need a dynamic background texture for your Web site to enhance your business. In the next example, a simple Web page is built to generate background textures. A table of small pictures such as stones, fabric materials, and wood is used. When a visitor runs over one of the images using a mouse, the entire background will change into the selected texture. The page has the following code:



Example: ex06-06.htm - Creating Background Texture

 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> Creating Background Texture - ex06-06.htm </title>
 7:    </head>
 8:
 9:    <style>
10:      h3 { font-family: Arial; font-size: 16pt;
11:           font-weight:bold; color: yellow;text-align:center}
12:      body{background-color:#448844}
13:      .td01{background:#00ffff;width:70px;height:60px}
14:      .img01{width:50px;height:50px;vertical-align:middle"}
15:    </style>
16:
17:    <body id="body01">
18:    <div align="center">
19:    <table border="3">
20:     <tr><td colspan="5" style="background:#000088">
21:        <h3>Creating Background Textures</h3></td></tr>
22:     <tr><td class="td01" align="center">
23:      <img alt="pic" class="img01" src="texture01.jpg"
24:       onmouseover=
25:        "document.getElementById('body01').background='texture01.jpg'"
26:        onmouseout="document.getElementById('body01').background=''" />
27:     </td>
28:     <td class="td01" align="center">
29:      <img alt="pic" class="img01" src="texture02.jpg"
30:       onmouseover=
31:        "document.getElementById('body01').background='texture02.jpg'"
32:        onmouseout="document.getElementById('body01').background=''" />
33:     </td>
34:     <td class="td01" align="center">
35:      <img alt="pic" class="img01" src="texture03.jpg"
36:       onmouseover=
37:        "document.getElementById('body01').background='texture03.jpg'"
38:        onmouseout="document.getElementById('body01').background=''" />
39:     </td>
40:     <td class="td01" align="center">
41:      <img alt="pic" class="img01" src="texture04.jpg"
42:       onmouseover=
43:        "document.getElementById('body01').background='texture04.jpg'"
44:        onmouseout="document.getElementById('body01').background=''" />
45:     </td>
46:     <td class="td01" align="center">
47:      <img alt="pic" class="img01" src="texture05.jpg"
48:       onmouseover=
49:        "document.getElementById('body01').background='texture05.jpg'"
50:        onmouseout="document.getElementById('body01').background=''" />
51:     </td>
52:    </body>
53:    </html>

After the style definition in lines 915, the key element of this page is the code fragment occupying lines 2227:



22:     <td class="td01" align="center">
23:      <img alt="pic" class="img01" src="texture01.jpg"
24:       onmouseover=
25:        "document.getElementById('body01').background='texture01.jpg'"
26:        onmouseout="document.getElementById('body01').background=''" />
27:     </td>

Line 22 defines table data with a style class td01 specifying color and size. Inside the table data (line 23) is an image with file name texture01.jpg. The next two lines indicate that if a mouse runs over this small picture, the browser will get the body id (i.e., body01) and use the image file texture01.jpg to generate the entire background texture. If the mouse runs outside the picture, the background color will be restored, as in Figs 6.7 and 6.8.

Figure 6.7. Mouse-over texture I

graphics/06fig07.gif


Figure 6.8. Mouse-over texture II

graphics/06fig08.jpg


    Table of Contents

    Previous Next