6.1 Introduction: mouse events on the Web

6.1 Introduction: mouse events on the Web

Without a doubt, one of the necessary devices attached to our computer is the mouse. Indeed, from the moment you turn on your computer, you will need a mouse to help you to navigate your system. For example, you use your mouse to pick an icon, to activate a menu, and even to exit from your system. When surfing on the Web, the mouse is an absolute necessity. For HTML designers, mouse control capability is overwhelmed only by the HTML anchor element <a>. With just one mouse click, the anchor element can take you to the outside world. HTML, as a language, didn't tell us how to control a mouse for other purposes. It did, however, provide a series of events (mouse events) for us to use and control them indirectly. This chapter is dedicated to the discussion of mouse events. The differences among browsers and the confusion over the Document Object Model (DOM) are also discussed at the same time. This chapter presents a comprehensive discussion on "mouse-over" (or rollover) techniques together with demonstrations. We also show you how to capture the position of the mouse and to move objects (texts and images) along with the mouse. All these ideas are put together in section 6.5 to build a menu system with window style. You will see that a menu system can be implemented easily with mouse-over techniques. Some of the techniques in this chapter lead to the discussion on Web programming in later chapters.

In general we follow the W3C recommendations on mouse events. All examples will run on the latest versions of both IE and NS browsers. A majority of them will run even without the need for any browser detection codes. Along with the W3C standard, some professional techniques to deal with mouse events concerning backward compatibility are also presented. These discussions, particularly in the early sections, should provide enough background material and ideas to help you develop all-singing and dancing Web pages that are independent of browsers and versions.

What are mouse events, anyway?

6.1.1 Mouse events

Any operation that involves a mouse will generate mouse events. These events are used to trigger certain kinds of actions designed by Web programmers. In this chapter, we're going to discuss the four basic mouse operations in Table 6.1 and their corresponding mouse events.

Table 6.1. Mouse events

Operations	Events	XHTML description
Mouse movement	onmousemove	The mouse was moved within the boundary of the element
Mouse click	onclick	The mouse has been clicked
Mouse in	onmouseover	The mouse enters the bounds of an element from outside the element
Mouse out	onmouseout	The mouse was moved out of the boundary of the element

Before you can capture the mouse events and act accordingly, you need to associate each XHTML element with an identity (id). Previous HTML such as HTML4.01 defines a name attribute for elements <a>, <applet>, <frame>, <img>, and <map>. In XHTML the name attribute is deprecated and the attribute id is used instead. For backward compatibility, and to develop Web pages for all major browsers, we follow the recommendations of the W3C authority to use both the name and id, with identical values such as

<img alt="pic" id="pic01" name="pic01" src="pic01.jpg" />

An element with an id is considered as an object with its own boundary. For each action like "Move Over" or "On Click," the browsers (or capable browsers) capture the event and refer back to the element in the form of a mouse event. Web programmes may need to use some kind of programming techniques to handle these mouse events (or simply events). This idea is used to form the so-called "Document Object Model" or DOM as it is now famously known. Basically, the DOM is a structure on the Web to allow us to access Web page elements by means of other technologies.

6.1.2 DOM confusion

Unfortunately, the lack of standard implementation and cooperation amongst major browser developers creates a confusing situation regarding the DOM. For example, Web programmers, for the last few years, have had difficulties sorting out a unifying DOM structure between the IE and NS families of browsers. As a result, a detection process is usually needed and consequently two sets of coding are required in order to display Web pages correctly. One set is for the IE and the other for NS. The following is a popular browser detection code:

Listing: ex06-01.txt

 1:    <script language="JavaScript">
 2:    <!--
 3:    if (document.all)
 4:    {
 5:      alert("Browser: Internet Explorer Detected");
 6:      // doing all sort of things for IE.
 7:    }
 8:    else if (document.layers)
 9:    {
10:      alert("Browser: Netscape Navigator Detected");
11:      // doing all sort of things for Netscape.
12:    }
13:    else
14:    {
15:      alert("Panic: Unrecognized Browser Detected");
16:    }
17:    // -->
18:    </script>

This code works well for the IE family and NS4.x and previous versions. If you run this on NS 6.x, you will get the "Panic: Unrecognized Browser Detected" message. This is because NS6.x doesn't support IE's document.all or its own document.layers feature. Netscape gave up its own DOM in favor of the W3C's. Similar things are happening among IE family members. In fact, it is not just the differences in the DOM that you may need to handle, but also the "Event Model" differences.

Fortunately, you don't really need to handle these situations in great detail at this moment. Later in this chapter, we will show you how to handle browsers' differences and to write the corresponding detection codes. First let's begin with some simple mouse control programs with no or very little browser and version conflicts.