DHTML Utopia Modern Web Design Using JavaScript & DOM- P7:In a single decade, the Web has evolved from a simple method of delivering technical documents to an essential part of daily life, making and breaking relationships and fortunes along the way. “Looking something up on the Internet,” by which is almost always meant the Web, is now within reach of almost anyone living in a first-world country, and the idea of conducting conversations and business (and probably orchestras) in your Web browser is no longer foreign, but part of life | Chapter 5 Animation width 20em height 6em border 3px solid red padding margin 1em style head body a href id mylink Home a p id explain nbsp p body html This page is a single link with a carefully styled paragraph that contains nothing. Here s the matching script File function addEvent elm evType fn useCapture if evType fn useCapture return true else if var r on evType fn return r else elm on evType fn function init if return var mylink mylink addEvent mylink mouseover mover false addEvent mylink mouseout mout false function mover TIMEOUT_ID setTimeout explain .innerHTML Return to the homepage 2000 function mout put in an nbsp placeholder to clear the current content 100 Licensed to siowchen@ The setTimeout Function explain .innerHTML nbsp clearTimeout TIMEOUT_ID var TIMEOUT_ID addEvent window load init false We ve got the now-familiar addEvent code a listener initialization function and some listeners. It s all stuff we ve discussed before. Let s see what s new. We want a link that displays descriptive text if we hover over it for a little while. We ve chosen 2000 2 seconds to exaggerate the effect normally you d use a number like 500 half a second . However if we mouse away from the link before the descriptive text is displayed we don t want it to appear later. First we attach mouseover and mouseout listeners to the link in the standard way. Here s the mouseover listener File excerpt function mover TIMEOUT_ID setTimeout explain .innerHTML Return to the homepage 2000 The mouseover listener controls the display of the descriptive text when we hover over the link we start a timeout counter by passing a string to setTimeout. That string is code that will display the descriptive text and that code will run 2000ms after we hover over .
