CD-242 Part VI ✦ Appendixes Listing 15-42 (continued) onMouseUp=”return setImage(‘Left’,’Up’)” onMouseOut=”return setImage(‘Left’,’Norm’)” > <IMG NAME=”Left” SRC=”LeftNorm.gif” HEIGHT=16 WIDTH=16 BORDER=0></A> <A HREF=”javascript:void(0)” onMouseOver=”return setImage(‘Right’,’Up’)” onMouseDown=”return setImage(‘Right’,’Down’)” onMouseUp=”return setImage(‘Right’,’Up’)” onMouseOut=”return setImage(‘Right’,’Norm’)” > <IMG NAME=”Right” SRC=”RightNorm.gif” HEIGHT=16 WIDTH=16 BORDER=0></A> </CENTER> </BODY> </HTML> 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 (✓) ✓✓✓✓ elementObject.onMouseMove CD-243 Appendix F ✦ Examples from Parts III and IV Example Listing 15-43 is a simplified example of dragging elements in IE4+. (See Chapter 31 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 han- dler 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 drag- gable 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 offsetX and offsetY variables (minus any scrolling that the body is subject to at that instant). These offset values are necessary to let the scripts set the location of the image during dragging (the location is set for the top-left corner of the image) while keeping the cur- sor in the same location within the image as when the user first presses the mouse. As the user drags the image, the onMouseDown event handler fires repeatedly, allow- ing the dragIt() function to continually update the location of the element relative to the current cursor position (the event.clientX and event.clientY properties). The global offset variables are subtracted from the cursor position to preserve the relation of the image’s top-left corner to the initial cursor position at mouse down. Upon the user releasing the mouse button, the release() function turns off the onMouseMove event handler (setting it to null). This prevents the event from being processed at all during normal usage of the page. The selectedObj global variable is also set to null, turning off the “switch” that indicates dragging is in session. Listing 15-43: Dragging Elements with onMouseMove <HTML> <HEAD><TITLE>onMouseMove Event Handler</TITLE> Continued elementObject.onMouseMove CD-244 Part VI ✦ Appendixes Listing 15-43 (continued) <STYLE TYPE=”text/css”> #camap {position:absolute; left:20; top:120} #ormap {position:absolute; left:80; top:120} #wamap {position:absolute; left:140; top:120} </STYLE> <SCRIPT LANGUAGE=”JavaScript”> // global variables used while dragging var offsetX = 0 var offsetY = 0 var selectedObj var frontObj // set document-level event handlers document.onmousedown = engage document.onmouseup = release // positioning an object at a specific pixel coordinate function shiftTo(obj, x, y) { obj.style.pixelLeft = x obj.style.pixelTop = y } // setting the z-order of an object function bringToFront(obj) { if (frontObj) { frontObj.style.zIndex = 0 } frontObj = obj frontObj.style.zIndex = 1 } // set global var to a reference to dragged element function setSelectedObj() { var imgObj = window.event.srcElement if (imgObj.id.indexOf(“map”) == 2) { selectedObj = imgObj bringToFront(selectedObj) return } selectedObj = null return } // do the dragging (called repeatedly by onMouseMove) function dragIt() { if (selectedObj) { elementObject.onMouseMove CD-245 Appendix F ✦ Examples from Parts III and IV shiftTo(selectedObj, (event.clientX - offsetX), (event.clientY - offsetY)) return false } } // set global vars and turn on mousemove trapping (called by onMouseDown) function engage() { setSelectedObj() if (selectedObj) { document.onmousemove = dragIt offsetX = window.event.offsetX - document.body.scrollLeft offsetY = window.event.offsetY - document.body.scrollTop } } // restore everything as before (called by onMouseUp) function release() { if (selectedObj) { document.onmousemove = null selectedObj = null } } </SCRIPT> </HEAD> <BODY> <H1>onMouseMove Event Handler</H1> <HR> Click and drag the images: <IMG ID=”camap” SRC=”camap.gif” WIDTH=”47” HEIGHT=”82” BORDER=”0”> <IMG ID=”ormap” SRC=”ormap.gif” WIDTH=”57” HEIGHT=”45” BORDER=”0”> <IMG ID=”wamap” SRC=”wamap.gif” WIDTH=”38” HEIGHT=”29” BORDER=”0”> </SCRIPT> </BODY> </HTML> onMouseOut onMouseOver NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ elementObject.onMouseOut CD-246 Part VI ✦ Appendixes Example Listing 15-44 uses the U.S. Pledge of Allegiance with four links to demonstrate how to use the onMouseOver and onMouseOut event handlers. Notice that for each link, the handler runs a general-purpose function that sets the window’s status message. The function returns a true value, which the event handler call evaluates to repli- cate the required return true statement needed for setting the status bar. In one status message, I supply a URL in parentheses to let you evaluate how helpful you think it is for users. Listing 15-44: Using onMouseOver and onMouseOut Event Handlers <HTML> <HEAD> <TITLE>onMouseOver and onMouseOut Event Handlers</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function setStatus(msg) { status = msg return true } // destination of all link HREFs function emulate() { alert(“Not going there in this demo.”) } </SCRIPT> </HEAD> <BODY> <H1>onMouseOver and onMouseOut Event Handlers </H1> <HR> <H1>Pledge of Allegiance</H1> <HR> I pledge <A HREF=”javascript:emulate()” onMouseOver=”return setStatus(‘View dictionary definition’)” onMouseOut=”return setStatus(‘’)”>allegiance</A> to the <A HREF=”javascript:emulate()” onMouseOver=”return setStatus(‘Learn about the U.S. flag (http://lcweb.loc.gov)’)” onMouseOut=”return setStatus(‘’)”>flag</A> of the <A HREF=”javascript:emulate()” onMouseOver=”return setStatus(‘View info about the U.S. government’)” onMouseOut=”return setStatus(‘’)”>United States of America</A>, and to the Republic for which it stands, one nation <A HREF=”javascript:emulate()” onMouseOver=”return setStatus(‘Read about the history of this phrase in the Pledge’)” onMouseOut=”return setStatus(‘’)”>under God</A>, indivisible, with liberty and justice for all. </BODY> </HTML> elementObject.onMouseOut CD-247 Appendix F ✦ Examples from Parts III and IV onPaste NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example Listing 15-45 demonstrates how to use the onBeforePaste and onPaste event han- dlers (in conjunction with onBeforeCopy and onCopy) to let scripts control the data transfer process during a copy-and-paste user operation. A table contains words to be copied (one column of nouns, one column of adjectives) and then pasted into blanks in a paragraph. The onBeforeCopy and onCopy event handlers are assigned to the TABLE element because the events from the TD elements bub- ble up to the TABLE container and there is less HTML code to contend with. Inside the paragraph, two SPAN elements contain underscored blanks. To paste text into the blanks, the user must first select at least one character of the blanks. (See Listing 15-37, which gives a drag-and-drop version of this application.) The onBeforePaste event handler in the paragraph (which gets the event as it bubbles up from either SPAN) sets the event.returnValue property to false, thus allow- ing the Paste item to appear in the context and Edit menus (not a normal occur- rence in HTML body content). At paste time, the innerHTML property of the target SPAN is set to the text data stored in the clipboard. The event.returnValue property is set to false here, as well, to prevent normal system pasting from interfering with the controlled version. Listing 15-45: Using onBeforePaste and onPaste Event Handlers <HTML> <HEAD> <TITLE>onBeforePaste and onPaste Event Handlers</TITLE> <STYLE TYPE=”text/css”> TD {text-align:center} TH {text-decoration:underline} .blanks {text-decoration:underline} </STYLE> <SCRIPT LANGUAGE=”JavaScript”> Continued elementObject.onPaste CD-248 Part VI ✦ Appendixes Listing 15-45 (continued) function selectWhole() { var obj = window.event.srcElement var range = document.body.createTextRange() range.moveToElementText(obj) range.select() event.returnValue = false } function handleCopy() { var rng = document.selection.createRange() clipboardData.setData(“Text”,rng.text) event.returnValue = false } function handlePaste() { var elem = window.event.srcElement if (elem.className == “blanks”) { elem.innerHTML = clipboardData.getData(“Text”) } event.returnValue = false } function handleBeforePaste() { var elem = window.event.srcElement if (elem.className == “blanks”) { event.returnValue = false } } </SCRIPT> </HEAD> <BODY> <H1>onBeforePaste and onPaste Event Handlers</H1> <HR> <P>Your goal is to copy and paste one noun and one adjective from the following table into the blanks of the sentence. Select a word from the table and copy it to the clipboard. Select one or more spaces of the blanks in the sentence and choose Paste to replace the blank with the clipboard contents.</P> <TABLE CELLPADDING=5 onBeforeCopy=”selectWhole()” onCopy=”handleCopy()” > <TR><TH>Nouns</TH><TH>Adjectives</TH></TR> <TR><TD>truck</TD><TD>round</TD></TR> <TR><TD>doll</TD><TD>red</TD></TR> <TR><TD>ball</TD><TD>pretty</TD></TR> </TABLE> <P ID=”myP” onBeforePaste=”handleBeforePaste()” onPaste=”handlePaste()”> Pat said, “Oh my, the <SPAN ID=”blank1” CLASS=”blanks”> </SPAN> elementObject.onPaste CD-249 Appendix F ✦ Examples from Parts III and IV is so <SPAN ID=”blank2” CLASS=”blanks”> </SPAN>!”</P> <BUTTON onClick=”location.reload()”>Reset</BUTTON> </BODY> </HTML> onPropertyChange NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example The page generated by Listing 15-46 contains four radio buttons that alter the innerHTML and style.color properties of a paragraph. The paragraph’s onPropertyChange event handler invokes the showChange() function, which extracts information about the event and displays the data in the status bar of the window. Notice how the property name includes style. when you modify the style sheet property. Listing 15-46: Using the onPropertyChange Property <HTML> <HEAD> <TITLE>onPropertyChange Event Handler</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function normalText() { myP.innerText = “This is a sample paragraph.” } function shortText() { myP.innerText = “Short stuff.” } function normalColor() { myP.style.color = “black” } function hotColor() { myP.style.color = “red” } Continued elementObject.onPropertyChange CD-250 Part VI ✦ Appendixes Listing 15-46 (continued) function showChange() { var objID = event.srcElement.id var propName = event.propertyName var newValue = eval(objID + “.” + propName) status = “The “ + propName + “ property of the “ + objID status += “ object has changed to \”” + newValue + “\”.” } </SCRIPT> </HEAD> <BODY> <H1>onPropertyChange Event Handler</H1> <HR> <P ID=”myP” onPropertyChange = “showChange()”>This is a sample paragraph.</P> <FORM> Text: <INPUT TYPE=”radio” NAME=”btn1” CHECKED onClick=”normalText()”>Normal <INPUT TYPE=”radio” NAME=”btn1” onClick=”shortText()”>Short <BR> Color: <INPUT TYPE=”radio” NAME=”btn2” CHECKED onClick=”normalColor()”>Black <INPUT TYPE=”radio” NAME=”btn2” onClick=”hotColor()”>Red </FORM> </BODY> </HTML> onReadyStateChange NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example You can use the onReadyStateChange event handler to assist with a status display while a long external file, such as a Java applet, loads. For example, you might have a small image on a page that changes with the state change of an applet. The <APPLET> tag assigns a function to the onReadyStateChange event handler: <APPLET onReadyStateChange=”showState(this)”> Then the function changes the image for each state type: elementObject.onReadyStateChange CD-251 Appendix F ✦ Examples from Parts III and IV function showState(obj) { var img = document.all.statusImage switch (obj.readyState) { case “uninitialized” : img.src = uninit.src break case “loading” : img.src = loading.src break case “complete” : img.src = ready.src } } The preceding function assumes that the state images are precached as the page loads. onResize NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓✓✓ Example If you want to capture the user’s resizing of the browser window (or frame), you can assign a function to the onResize event handler either via script window.onresize = handleResize or by an HTML attribute of the BODY element: <BODY onResize=”handleResize()”> onSelectStart NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ elementObject.onSelectStart . pledge <A HREF= javascript: emulate()” onMouseOver=”return setStatus(‘View dictionary definition’)” onMouseOut=”return setStatus(‘’)”>allegiance</A> to the <A HREF= javascript: emulate()”. {text-decoration:underline} .blanks {text-decoration:underline} </STYLE> <SCRIPT LANGUAGE= JavaScript > Continued elementObject.onPaste CD-248 Part VI ✦ Appendixes Listing 15-45 (continued) function selectWhole(). IE4 IE5 IE5.5 Compatibility (✓) ✓✓✓✓ elementObject.onMouseMove CD-243 Appendix F ✦ Examples from Parts III and IV Example Listing 15-43 is a simplified example of dragging elements in IE4+. (See