Introduction to Dynamic HTML - DHTML
DOMWe 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.
CSSIn 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.
A Note of CautionYou 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.
This site needs an editor - click to learn more!
Editor's Picks Articles
Top Ten Articles
Content copyright © 2021 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.