Introduction to Dynamic HTML - DHTML

Guest Author - Diane Cipollo

Just what is Dynamic HTML? First, it isn't a programming language in the purest sense. DHTML is a combination of three things; Cascading Style Sheets, JavaScript and the DOM. The CSS is used to control the appearance and positioning of parts of a webpage. JavaScript is a client-side scripting language that causes things to happen on the webpage. The DOM is the blueprint of the webpage. Let's say you want to use DHTML to add a chaser to the mouse cursor. This is a small image that follows your mouse cursor over the webpage.

DOM

We need a way to tell when the mouse cursor moves. We can do this with the Document Object Model, or DOM, which is a method of naming everything on a webpage just as a blueprint names every part of a house. For example, if you wanted to know when someone opens (move) the window in the kitchen of your house, you would say house.kitchen.onwindowmove. The DOM document.onmousemove works the same way to identify the movement of the mouse.

CSS

In order for the chaser image to follow the mouse cursor around the webpage, we need to reposition the chaser image each time the mouse moves. We will use the positioning feature of Cascading Style Sheets to do that. We will use CSS to tell the browser to always keep the chaser image a certain distance from the mouse cursor. Therefore when the mouse moves, so will the chaser.

JavaScript

We want the chaser image to move only when the mouse moves so we need to program this on the webpage. We can use a scripting language, a small programming language, to tell the web browser how to respond when something happens (when an event occurs) on the webpage. We will use JavaScript to do this. In our example, the event is the movement of the mouse cursor (onmousemove). So we will program the web browser to respond to the onmousemove event by repositioning the chaser image according to the CSS instructions.

A Note of Caution

You can use DHTML to do some cool things on your webpages which can be a lot of fun for you and your readers. However, you need to keep in mind that each web browser is different and the cool effect you are programming may work differently, or not at all, in some web browsers. For example, the mouse chaser will not work in the Firefox browser.