CD-452 Part VI ✦ Appendixes An important part of the listing is the way the action of sizing and showing the posi- tioned element is broken out as a separate function ( setHiliter()) from the one that is the onClick event handler function (handleClick()). This is done so that the onResize event handler can trigger a script that gets the current rectangle for the last element clicked, and the positioned element can be sized and moved to maintain the highlight of the same text. As an experiment, try removing the onResize event handler from the <BODY> tag and watch what happens to the high- lighted rectangle after you resize the browser window: the rectangle that represents the TextRectangle remains unchanged and loses track of the abstract TextRectangle associated with the actual element object. Listing 19-12: Using the TextRectangle Object Properties <HTML> <HEAD> <TITLE>TextRectangle Object</TITLE> <SCRIPT LANGUAGE=”JavaScript”> // preserve reference to last clicked elem so resize can re-use it var lastElem // TextRectangle left tends to be out of registration by a couple of pixels var rectLeftCorrection = 2 // process mouse click function handleClick() { var elem = event.srcElement if (elem.className && elem.className == “sample”) { // set hiliter element only on a subset of elements lastElem = elem setHiliter() } else { // otherwise, hide the hiliter hideHiliter() } } function setHiliter() { if (lastElem) { var textRect = lastElem.getBoundingClientRect() hiliter.style.pixelTop = textRect.top + document.body.scrollTop hiliter.style.pixelLeft = textRect.left + document.body.scrollLeft – rectLeftCorrection hiliter.style.pixelHeight = textRect.bottom - textRect.top hiliter.style.pixelWidth = textRect.right - textRect.left hiliter.style.visibility = “visible” } } function hideHiliter() { hiliter.style.visibility = “hidden” lastElem = null TextRectangle.bottom CD-453 Appendix F ✦ Examples from Parts III and IV } </SCRIPT> </HEAD> <BODY onClick=”handleClick()” onResize=”setHiliter()”> <H1>TextRectangle Object</H1> <HR> <P>Click on any of the four colored elements in the paragraph below and watch the highlight rectangle adjust itself to the element’s TextRectangle object. <P CLASS=”sample”>Lorem ipsum dolor sit amet, <SPAN CLASS=”sample” STYLE=”color:red”>consectetaur adipisicing elit</SPAN>, sed do eiusmod tempor <SPAN CLASS=”sample” STYLE=”color:green”>incididunt ut labore et dolore <SPAN CLASS=”sample” STYLE=”color:blue”>magna aliqua</SPAN>. Ut enim adminim veniam, quis nostrud exercitation ullamco</SPAN> laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit involuptate velit esse cillum dolore eu fugiat nulla pariatur.</P> <DIV ID=”hiliter” STYLE=”position:absolute; background-color:salmon; z-index:-1; visibility:hidden”></DIV> </BODY> </HTML> Chapter 22 Examples The following sections contain examples from Chapter 22, “Image, Area, and Map Objects.” Image and IMG Element Objects Properties align NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ IMG.align CD-454 Part VI ✦ Appendixes Example Listing 22-1 enables you to choose from the different align property values as they influence the layout of an image whose HTML is embedded inline with some other text. Resize the window to see different perspectives on word-wrapping on a page and their effects on the alignment choices. Not all browsers provide distinctive alignments for each choice, so experiment in multiple supported browsers. Listing 22-1: Testing an Image’s align Property <HTML> <HEAD> <TITLE>IMG align Property</TITLE> <SCRIPT LANGUAGE=”JavaScript”> function setAlignment(sel) { document.myIMG.align = sel.options[sel.selectedIndex].text } </SCRIPT> </HEAD> <BODY> <H1>IMG align Property</H1> <HR> <FORM> Choose the image alignment: <SELECT onChange=”setAlignment(this)”> <OPTION>absbottom <OPTION>absmiddle <OPTION>baseline <OPTION SELECTED >bottom <OPTION >left <OPTION>middle <OPTION>right <OPTION>texttop <OPTION>top </SELECT> </FORM> <HR> <P>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <IMG NAME=”myIMG” SRC=”desk1.gif” HEIGHT=90 WIDTH=120> Ut enim adminim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</P> </BODY> </HTML> IMG.align CD-455 Appendix F ✦ Examples from Parts III and IV alt NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Use The Evaluator (Chapter 13) to assign a string to the alt property of the document.myIMG image on the page. First, assign a nonexistent image to the src property to remove the existing image: document.myIMG.src = “fred.gif” Scroll down to the image, and you can see a space for the image. Now, assign a string to the alt property: document.myIMG.src = “Fred\’s face” The extra backslash is required to escape the apostrophe inside the string. Scroll down to see the new alt text in the image space. border NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ ✓✓✓ Example Feel free to experiment with the document.myIMG.border property for the image in The Evaluator (Chapter 13) by assigning different integer values to the property. complete NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ ✓✓✓ IMG.complete CD-456 Part VI ✦ Appendixes Example To experiment with the image.complete property, quit and relaunch your browser before loading Listing 22-2 (in case the images are in memory cache). As each image loads, click the “Is it loaded yet?” button to see the status of the complete property for the image object. The value is false until the loading finishes; then, the value becomes true. The arch image is the bigger of the two image files. You may have to quit and relaunch your browser between trials to clear the arch image from the cache (or empty the browser’s memory cache). If you experience difficulty with this property in your scripts, try adding an onLoad event handler (even if it is empty, as in Listing 22-2) to your <IMG> tag. Listing 22-2: Scripting image.complete <HTML> <HEAD> <SCRIPT LANGUAGE=”JavaScript1.1”> function loadIt(theImage,form) { form.result.value = “” document.images[0].src = theImage } function checkLoad(form) { form.result.value = document.images[0].complete } </SCRIPT> </HEAD> <BODY> <IMG SRC=”cpu2.gif” WIDTH=120 HEIGHT=90 onLoad=””> <FORM> <INPUT TYPE=”button” VALUE=”Load keyboard” onClick=”loadIt(‘cpu2.gif’,this.form)”> <INPUT TYPE=”button” VALUE=”Load arch” onClick=”loadIt(‘arch.gif’,this.form)”><P> <INPUT TYPE=”button” VALUE=”Is it loaded yet?” onClick=”checkLoad(this.form)”> <INPUT TYPE=”text” NAME=”result”> </FORM> </BODY> </HTML> dynsrc NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ IMG.dynsrc CD-457 Appendix F ✦ Examples from Parts III and IV Example To swap between still and video sources, simply empty the opposite property. Listing 22-3 shows a simplified example that swaps between one fixed image and one video image. This listing exhibits most of the bugs associated with changing between static image and video sources described in the text. Listing 22-3: Changing Between Still and Motion Images <HTML> <HEAD> <TITLE>IMG dynsrc Property</TITLE> <SCRIPT LANGUAGE=”JavaScript”> var trainImg = new Image(160,120) trainImg.src = “amtrak.jpg” trainImg.dynsrc = “amtrak.mpg” function setLoop() { var selector = document.forms[0].looper document.myIMG.loop = selector.options[selector.selectedIndex].value } function setImage(type) { if (type == “jpg”) { document.myIMG.dynsrc = “” document.myIMG.src = trainImg.src } else { document.myIMG.src = “” document.myIMG.start = “fileopen” setLoop() document.myIMG.dynsrc = trainImg.dynsrc } } </SCRIPT> </HEAD> <BODY> <H1>IMG dynsrc Property</H1> <HR> <FORM> Choose image type: <INPUT TYPE=”radio” NAME=”imgGroup” CHECKED onClick=”setImage(‘jpg’)”>Still <INPUT TYPE=”radio” NAME=”imgGroup” onClick=”setImage(‘mpg’)”>Video <P>Play video how many times after loading: <SELECT NAME=”looper” onChange=”setLoop()”> <OPTION VALUE=1 SELECTED>Once <OPTION VALUE=2>Twice <OPTION VALUE=-1>Continuously Continued IMG.dynsrc CD-458 Part VI ✦ Appendixes Listing 22-3 (continued) </SELECT></P> </FORM> <HR> <IMG NAME=”myIMG” SRC=”amtrak.jpg” HEIGHT=120 WIDTH=160> </BODY> </HTML> If you don’t explicitly set the start property to fileopen (as shown in Listing 22-3), users of IE for the Macintosh have to double-click (IE4) or click (IE5) the movie image to make it run. fileCreatedDate fileModifiedDate fileSize NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example These properties are similar to the same-named properties of the document object. You can see these properties in action in Listing 18-4. Make a copy of that listing, and supply an image before modifying the references from the document object to the image object to see how these properties work with the IMG element object. height width NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ ✓✓✓ IMG.height CD-459 Appendix F ✦ Examples from Parts III and IV Example Use The Evaluator (Chapter 13) to experiment with the height and width proper- ties. Begin retrieving the default values by entering the following two statements into the top text box: document.myIMG.height document.myIMG.width Increase the height of the image from its default 90 to 180: document.myIMG.height = 180 If you scroll down to the image, you see that the image has scaled in proportion. Next, exaggerate the width: document.myIMG.width = 400 View the resulting image. hspace vspace NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ ✓✓✓ Example Use The Evaluator (Chapter 13) to experiment with the hspace and vspace proper- ties. Begin by noticing that the image near the bottom of the page has no margins specified for it and is flush left with the page. Now assign a horizontal margin spac- ing of 30 pixels: document.myIMG.hspace = 30 The image has shifted to the right by 30 pixels. An invisible margin also exists to the right of the image. IMG.hspace CD-460 Part VI ✦ Appendixes isMap NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example The image in The Evaluator page is not defined as an image map. Thus, if you type the following statement into the top text box, the property returns false: document.myIMG.isMap loop NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See Listing 22-3 for the dynsrc property to see the loop property in action. lowsrc lowSrc NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ ✓✓✓ Example See Listing 22-5 for the image object’s onLoad event handler to see how the source- related properties affect event processing. IMG.lowsrc CD-461 Appendix F ✦ Examples from Parts III and IV name NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓(✓) ✓✓ ✓ Example You can use The Evaluator to examine the value returned by the name property of the image on that page. Enter the following statement into the top text box: document.myIMG.name Of course, this is redundant because the name is part of the reference to the object. nameProp NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ Example You can use The Evaluator to compare the results of the src and nameProp proper- ties in IE5+/Windows. Enter each of the following statements into the top text box: document.myIMG.src document.myIMG.nameProp protocol NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ IMG.protocol . CD-452 Part VI ✦ Appendixes An important part of the listing is the way the action of sizing and showing the posi- tioned. Properties <HTML> <HEAD> <TITLE>TextRectangle Object</TITLE> <SCRIPT LANGUAGE= JavaScript > // preserve reference to last clicked elem so resize can re-use it var lastElem //. { hiliter.style.visibility = “hidden” lastElem = null TextRectangle.bottom CD-453 Appendix F ✦ Examples from Parts III and IV } </SCRIPT> </HEAD> <BODY onClick=”handleClick()” onResize=”setHiliter()”> <H1>TextRectangle