Webmaster

DHTML : Customised pop-up information boxes
Contents ]
Dr Benton

Managing the Mouse Coordinates

If you have paid attention to our example, you will have noticed that a displayed info box also follows the mouse pointer while it is being moved. This means that there must be an ongoing process that determines the coordinates of the pointer. This is the responsibility of the get_mouse function:

23: var ns = (document.layers);
24: var ie = (document.all);

[...]

47: function get_mouse(e)
48: {
49:   var x = (ns) ? e.pageX : event.x+document.body.scrollLeft;
50:   var y = (ns) ? e.pageY : event.y+document.body.scrollTop;
54: }

After carrying out a small test to detect the browser type (lines 23 and 24), we then assign the mouse coordinates (e.pageX for Netscape Navigator and event.x+document.body.scrollLeft for Internet Explorer) to the x and y variables.

Note that we use a rather special conditional instruction:

var x = (ns) ? e.pageX : event.x+document.body.scrollLeft;

This line checks the value in the ns variable. If it is true, it assigns the value of the evaluated expression appearing before the colon to the x variable, otherwise, that of the expression following the colon.

Now let's see how to store and move an info box.

Which browser? The browser detection method we are using here is a special one. To detect whether or not Netscape Navigator is being used, we ascertain the presence of a document.layers object. Indeed, Netscape is the only one which refers to layers in this way. As for Microsoft's browser, it is the only one that uses the document.all object (to reference the whole page). So we can apply the same detection principle by checking the presence of this object.



  1   2   3   4   5   6   7