JavaScript Examples Bible - UserWorks Technologies

Chapter 1 ✦ Generic HTML Element Objects (Chapter 15)
IE4+ and NN6+ simplify the implementation of this kind of three-state image button
by allowing you to assign the event handlers directly to IMG element objects.
Wrapping images inside links is a backward compatibility approach that allows older
browsers to respond to clicks on images for navigation or other scripting tasks.
onMouseEnter
onMouseLeave
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓
Example
You can modify Listing 15-43 with the IE5.5 syntax by substituting onMouseEnter
for onMouseOver and onMouseLeave for onMouseOut. The effect is the same.
onMouseMove
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility (✓) ✓ ✓ ✓ ✓
Example
Listing 15-43 is a simplified example of dragging elements in IE4+. (See Chapter
31 of the JavaScript Bible for more dragging examples.) Three images are individually
positioned on the page. Most of the scripting code concerns itself with the
geography of click locations, the stacking order of the images, and the management
of the onMouseMove event handler so that it is active only when an item is dragged.
Scripts assign the onMouseDown and onMouseUp event handlers to the document
object, invoking the engage() and release() functions, respectively. When a user
mouses down anywhere in the document, the engage() function starts by invoking
setSelectedObj(). This function examines the target of the mouseDown event. If it
is one of the map images, the selectedObj global variable is set to the image
object and the element is brought to the front of the stacking order of images (any
previously stacked image is returned to its normal position in the stack).
MouseDown events on any other element simply make sure that the selectedObj
variable is null. The presence of a value assigned to selectedObj serves as a kind
of switch for other functions: When the variable contains a value, it means that the
user is doing something associated with dragging an element.
Back at the engage() function — provided the user mouses down on one of the
draggable images — the onMouseMove event handler is assigned to the document
object, setting it to invoke the dragIt() function. For the sake of users, the offset
of the mouse down event from the top-left corner of the image is preserved in the
117
elementObject.onMouseMove