|Published (Last):||9 May 2013|
|PDF File Size:||2.29 Mb|
|ePub File Size:||2.81 Mb|
|Price:||Free* [*Free Regsitration Required]|
The mouseover and mouseout functions do little other than the actual image swapping work.
It also avoids a problem with a similar technique, which uses className. Some users find this useful; others find it heartily annoying.
Failing thatwe attach the event listener directly to the element, as an event handler; this is required for IE5 on Macintosh. As we move, we want new areas of the big image to come into view. So, to hide an element from display, we can set its display property to none:. Some of the following script may seem a little opaque: An element is a piece of HTML utopoa represents one thing: The removal is done with the following lines:. Using the old-fashioned method above, only one piece of code morern be run in response to any event.
Events have two further important properties: Browser sniffing is flaky and prone to error, and should be avoided like the black plague.
Almost everything you do in DHTML will involve attaching code to events, as described in this chapter. Alternatively, you could string Moddern statements together, using semicolons in the attribute, but this makes the HTML code even more cluttered.
That information can be typed on a single line, or with a line break after EN”. As such, the code above becomes:. You can find them in the code archive for this book. The core of DHTML — the D-for-dynamic bit — lies in our ability to change those elements, to remove them, and to add new ones. If elements are improperly nested, problems arise.
The event handler is the location at which an event handler mocern placed. The first approach is to work out which browser is we used, then have a list within your code that states which browser supports which features. There is another useful feature; getElementsByTagName is defined on any node at all, not just the document.
If not, the event object passed to the function as uwingwhich also has a keyCode property, is used. We add our mouseover and mouseout event listeners using the standard approach.
Netscape also provides pageX and pageY, which are mouse coordinates relative to the xesign. Halting bubbling can be done in two ways, as is the case with much event handling: The childNodes array may contain nothing if the node has no children such nodes are called leaf nodes. Take some example figures: We pass the text for the text node as a parameter:. We might use the following code:.
We also check for bodyto prevent an infinite loop; if we get as far up the tree as the document bodywe give up. This is where things get a little complicated. For example, an element could have only one onclick attribute.
But what if you want to add a lot of dynamic content to a page? In addition to appendChildeach node has an insertBefore method, which is called with two arguments: Internet Explorer returns them relative to the window, as does Mozilla, but all of Opera, Konqueror, and iCab return them relative to the document.
In such cases, the browser gets it wrong. The document can be further processed and the results of that processing can be incorporated back into the presented page.