Introduction to Dynamic HTML
If you haven't already, try moving your mouse over the link above. When your mouse is over the link, the background of this web page changes color to a light green color (assuming you have a relatively recent web browser). Then, when you move your mouse away from the link, the background returns to a cream color. Welcome to DHTML.
Both functions perform the same task with different results. Each of the functions set the background color of the web page to a specified value. To achieve this result, we will apply the color setting through the manipulation of the document object. More specifically, we will refer to the document object's body object, and then reference the style object. From there, we apply our color setting to the backgroundColor object.
Another way of saying the same thing is this: "The document object contains the body object, which contains the style object, which contains the backgroundColor object. The modification of the value of the backgroundColor object permits us to change the background color of the current web page".
13.3 Monitoring Mouse MovementsAs we have seen from the previous section, there are a variety of mouse events that we can capture - thereby enabling us to be able to perform a specific task when an event occurs. Let's add another to the list: onMouseMove. More specifically, we would like to display the X and Y coordinates of the mouse's location in document window as the user moves the mouse. However, we would like to stay away from an HTML form, but display the coordinates with ordinary HTML text. (Recall that we used an HTML form in Lab 12 when we created our updating clock.)
Let's assume we have a simple web page that looks like what is shown in Figure 1. The code used to produce the page follows the image.
<body onMouseMove="display('mouseLoc', event);">Each time the mouse is moved within the body of the HTML document, we call the display function and pass it two arguments. The first is the ID name of the HTML element we wish to manipulate (in this case the mouseLoc paragraph), and the second argument is the actual mouse event object (which contains information about the location of the mouse among other things).
We add to the header of the document the display function which is quite small. Its code is as follows:
Assuming there is an element in the document which has a matching ID attribute, we can then manipulate its contents by setting the innerHTML property. In this case, we obtain the X location (horizontal) of the mouse pointer at the time of the event, and concatenate it with the string ", ". We follow this concatenation with another, the value of the Y location (vertical) of the mouse pointer at the time of the event.
Because we are modifying the innerHTML property, the value we are setting can also contain HTML tags as well (such as <i>, <b>, etc.) The innerHTML property helps to preserve their values and thus they are applied on the screen when the text modification is complete.
Our final page has the following source code:
13.4 Magical TextLet's take the example from Section 13.3 a bit further. Rather than tracking the coordinates of the mouse, we would like to pop up a message or text when the mouse passes over an element.
More specifically, we will display the contents of a table when the mouse passes over a link in the document. To achieve this, we first need the code for our table:
<table width="200" id="message" style="z-index: 5; visibility: hidden; border-width: thin; border-color: black; border-style: solid; position: absolute; left: 0; top: 0;">With this code, we create a table of size 200 which contains just one cell. The content of the cell is the message "That site really rocks!" If you look closely at the attributes of the table tag, you will likely see something new. In addition to specifying the id attribute for the table itself, we have embedded a style attribute. This is known as an in-line style.
The value assigned to this attribute is a string of CSS style properties which we are now somewhat familiar with. However, there are a few new properties we have included in this example. Briefly, each is described in the following table.
Essentially what we have done is created a small table with one cell of text in it. The table is placed with its upper left corner at the 0,0 coordinates in the browser window (as you will see the full code listing below, the parent element is the body tag). The table has a thin black border around it, and is invisible.
The z-index provides a vertical quality to our web page which we have not seen before. Layers can be created such that elements can be placed on top of each other. This may be undesirable in some cases to have text layered over text, however, in this case, we want the table to appear above other text. Thus, we have given it a value of 5. The larger the value of the z-index, the closer the element is to the user (or so it appears). The remaining text on the page will not have a z-index, and thus be rendered beneath the hidden table!
We complete the source code of the page by adding a new display function in the document's header. In addition, we create a link on the page and tie the function to the onMouseOver event. When the user mouses over the link, the table is displayed on top of anything else on the page.
We created the function similarly to the one shown in the previous section. Both the id string and the event object are passed to the function, so that we can properly display the table. We pass the id value so that we can obtain a reference to the table from within the function. The event object is passed so that we can obtain the value of the mouse coordinates. The source code is as follows:
Once the function is called, we obtain the reference to the element and the mouse coordinates. Before modifying the visibility property of the element (the table), we change the tables left and top properties so that the table will be 30 pixels to the right and below where the mouse event occurs. Finally, we change the visibility property and display the table! A picture of our popped up table is shown in Figure 2.
You may have noticed that we used the bold and centering formatting tags in this document. We did this, rather than using CSS, so that we could place all of the code needed to create this page in one source code file. We could have moved the formatting information to a separate CSS file, but chose not to in order to keep this example brief.
13.5 More with DHTMLWe have only begun to touch on what you can do with DHTML. In this lab, we have introduced parts of the document object that is part of the DOM. Using the document object, we can examine and manipulate elements of the HTML document that the user is viewing.
In the example below, we will display information about the user's browser in an alert message (similar to the alert we created in Lab 12. The properties we will be accessing from the navigator object are listed in the table below, each with a short description. It is important to remember that this is an incomplete list of properties. One of the tasks for Lab Activity #4, you will be asked to list the properties and methods of the navigator object along with a short description.
About the labs:
These labs were developed in conjunction with the Jones and Bartlett textbook Computer Science Illuminated by Nell Dale and John Lewis.
Lab content developed by Pete DePasquale and John Lewis.