Thông tin tài liệu
CD-462 Part VI ✦ Appendixes Example You can use The Evaluator to examine the protocol property of the image on the page. Enter the following statement into the top text box: document.myIMG.protocol src NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓(✓) ✓✓ ✓ Example In the following example (Listing 22-4), you see a few applications of image objects. Of prime importance is a comparison of how precached and regular images feel to the user. As a bonus, you see an example of how to set a timer to automatically change the images displayed in an image object. This feature is a popular request among sites that display advertising banners. As the page loads, a global variable is handed an array of image objects. Entries of the array are assigned string names as index values ( “desk1”, “desk2”, and so on). The intention is that these names ultimately will be used as addresses to the array entries. Each image object in the array has a URL assigned to it, which precaches the image. The page (see Figure 22-1) includes two IMG elements: one that displays noncached images and one that displays cached images. Under each image is a SELECT ele- ment that you can use to select one of four possible image files for each element. The onChange event handler for each SELECT list invokes a different function to change the noncached ( loadIndividual()) or cached (loadCached()) images. Both of these functions take as their single parameter a reference to the form that contains the SELECT elements. To cycle through images at five-second intervals, the checkTimer() function looks to see if the timer check box is checked. If so, the selectedIndex property of the cached image SELECT control is copied and incremented (or reset to zero if the index is at the maximum value). The SELECT element is adjusted, so you can now invoke the loadCached() function to read the currently selected item and set the image accordingly. For some extra style points, the <BODY> tag includes an onUnload event handler that invokes the resetSelects() function. This general-purpose function loops IMG.src CD-463 Appendix F ✦ Examples from Parts III and IV through all forms on the page and all elements within each form. For every SELECT element, the selectedIndex property is reset to zero. Thus, if a user reloads the page, or returns to the page via the Back button, the images start in their original sequence. An onLoad event handler makes sure that the images are in sync with the SELECT choices and the checkTimer() function is invoked with a five-second delay. Unless the timer check box is checked, however, the cached images don’t cycle. Listing 22-4: A Scripted Image Object and Rotating Images <HTML> <HEAD> <TITLE>Image Object</TITLE> <SCRIPT LANGUAGE=”JavaScript”> // global declaration for ‘desk’ images array var imageDB // pre-cache the ‘desk’ images if (document.images) { // list array index names for convenience var deskImages = new Array(“desk1”, “desk2”, “desk3”, “desk4”) // build image array and pre-cache them imageDB = new Array(4) for (var i = 0; i < imageDB.length ; i++) { imageDB[deskImages[i]] = new Image(120,90) imageDB[deskImages[i]].src = deskImages[i] + “.gif” } } // change image of ‘individual’ image function loadIndividual(form) { if (document.images) { var gifName = form.individual.options[form.individual.selectedIndex].value document.thumbnail1.src = gifName + “.gif” } } // change image of ‘cached’ image function loadCached(form) { if (document.images) { var gifIndex = form.cached.options[form.cached.selectedIndex].value document.thumbnail2.src = imageDB[gifIndex].src } } // if switched on, cycle ‘cached’ image to next in queue function checkTimer() { if (document.images && document.Timer.timerBox.checked) { var gifIndex = document.selections.cached.selectedIndex if (++gifIndex > imageDB.length - 1) { gifIndex = 0 Continued IMG.src CD-464 Part VI ✦ Appendixes Listing 22-4: A Scripted Image Object and Rotating Images } document.selections.cached.selectedIndex = gifIndex loadCached(document.selections) var timeoutID = setTimeout(“checkTimer()”,5000) } } // reset form controls to defaults on unload function resetSelects() { for (var i = 0; i < document.forms.length; i++) { for (var j = 0; j < document.forms[i].elements.length; j++) { if (document.forms[i].elements[j].type == “select-one”) { document.forms[i].elements[j].selectedIndex = 0 } } } } // get things rolling function init() { loadIndividual(document.selections) loadCached(document.selections) setTimeout(“checkTimer()”,5000) } </SCRIPT> </HEAD> <BODY onLoad=”init()” onUnload=”resetSelects ()”> <H1>Image Object</H1> <HR> <CENTER> <TABLE BORDER=3 CELLPADDING=3> <TR><TH></TH><TH>Individually Loaded</TH><TH>Pre-cached</TH></TR> <TR><TD ALIGN=RIGHT><B>Image:</B></TD> <TD><IMG SRC=”cpu1.gif” NAME=”thumbnail1” HEIGHT=90 WIDTH=120></TD> <TD><IMG SRC=”desk1.gif” NAME=”thumbnail2” HEIGHT=90 WIDTH=120></TD> </TR> <TR><TD ALIGN=RIGHT><B>Select image:</B></TD> <FORM NAME=”selections”> <TD> <SELECT NAME=”individual” onChange=”loadIndividual(this.form)”> <OPTION VALUE=”cpu1”>Wires <OPTION VALUE=”cpu2”>Keyboard <OPTION VALUE=”cpu3”>Desks <OPTION VALUE=”cpu4”>Cables </SELECT> </TD> <TD> <SELECT NAME=”cached” onChange=”loadCached(this.form)”> <OPTION VALUE=”desk1”>Bands IMG.src CD-465 Appendix F ✦ Examples from Parts III and IV <OPTION VALUE=”desk2”>Clips <OPTION VALUE=”desk3”>Lamp <OPTION VALUE=”desk4”>Erasers </SELECT></TD> </FORM> </TR></TABLE> <FORM NAME=”Timer”> <INPUT TYPE=”checkbox” NAME=”timerBox” onClick=”checkTimer()”>Auto-cycle through pre-cached images </FORM> </CENTER> </BODY> </HTML> Figure 22-1: The image object demonstration page (Images (c) Aris Multimedia Entertainment, Inc. 1994) IMG.src CD-466 Part VI ✦ Appendixes start NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ Example See Listing 22-3 earlier in this chapter for an example of how you can use the start property with a page that loads a movie clip into an IMG element object. x y NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓ Example If you want to scroll the document so that the link is a few pixels below the top of the window, use a statement such as this: window.scrollTo(document.images[0].x, (document.images[0].y - 3)) Event handlers onAbort onError NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ ✓✓✓ IMG.onAbort CD-467 Appendix F ✦ Examples from Parts III and IV Example Listing 22-5 includes an onAbort event handler. If the images already exist in the cache, you must quit and relaunch the browser to try to stop the image from load- ing. In that example, I provide a reload option for the entire page. How you handle the exception depends a great deal on your page design. Do your best to smooth over any difficulties that users may encounter. onLoad NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓ ✓ ✓✓✓ Example Quit and restart your browser to get the most from Listing 22-5. As the document first loads, the LOWSRC image file (the picture of pencil erasers) loads ahead of the computer keyboard image. When the erasers are loaded, the onLoad event handler writes “done” to the text field even though the main image is not loaded yet. You can experiment further by loading the arch image. This image takes longer to load, so the LOWSRC image (set on the fly, in this case) loads way ahead of it. Listing 22-5: The Image onLoad Event Handler <HTML> <HEAD> <SCRIPT LANGUAGE=”JavaScript”> function loadIt(theImage,form) { if (document.images) { form.result.value = “” document.images[0].lowsrc = “desk1.gif” document.images[0].src = theImage } } function checkLoad(form) { if (document.images) { form.result.value = document.images[0].complete } } function signal() { if(confirm(“You have stopped the image from loading. Do you want to try again?”)) { Continued IMG.onLoad CD-468 Part VI ✦ Appendixes Listing 22-5 (continued) location.reload() } } </SCRIPT> </HEAD> <BODY> <IMG SRC=”cpu2.gif” LOWSRC=”desk4.gif” WIDTH=120 HEIGHT=90 onLoad=”if (document.forms[0].result) document.forms[0].result.value=’done’” onAbort=”signal()”> <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> AREA Element Object Properties coords shape NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example See Listing 22-7 for a demonstration of the coords and shape properties in the con- text of scripting MAP element objects. AREA.coords CD-469 Appendix F ✦ Examples from Parts III and IV MAP Element Object Property areas NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓✓ Example Listing 22-7 demonstrates how to use scripting to replace the AREA element objects inside a MAP element. The scenario is that the page loads with one image of a com- puter keyboard. This image is linked to the keyboardMap client-side image map, which specifies details for three hot spots on the image. If you then switch the image displayed in that IMG element, scripts change the useMap property of the IMG element object to point to a second MAP that has specifications more suited to the desk lamp in the second image. Roll the mouse pointer atop the images, and view the URLs associated with each area in the statusbar (for this example, the URLs do not lead to other pages). Another button on the page, however, invokes the makeAreas() function (not working in IE5/Mac), which creates four new AREA element objects and (through DOM-specific pathways) adds those new area specifications to the image. If you roll the mouse atop the image after the function executes, you can see that the URLs now reflect those of the new areas. Also note the addition of a fourth area. Listing 22-7: Modifying AREA Elements on the Fly <HTML> <HEAD> <TITLE>MAP Element Object</TITLE> <SCRIPT LANGUAGE=”JavaScript”> // generate area elements on the fly function makeAreas() { document.myIMG.src = “desk3.gif” // build area element objects var area1 = document.createElement(“AREA”) area1.href = “Script-Made-Shade.html” area1.shape = “polygon” Continued MAP.areas CD-470 Part VI ✦ Appendixes Listing 22-7 (continued) area1.coords = “52,28,108,35,119,29,119,8,63,0,52,28” var area2 = document.createElement(“AREA”) area2.href = “Script-Made-Base.html” area2.shape = “rect” area2.coords = “75,65,117,87” var area3 = document.createElement(“AREA”) area3.href = “Script-Made-Chain.html” area3.shape = “polygon” area3.coords = “68,51,73,51,69,32,68,51” var area4 = document.createElement(“AREA”) area4.href = “Script-Made-Emptyness.html” area4.shape = “rect” area4.coords = “0,0,50,120” // stuff new elements into MAP child nodes if (document.all) { // works for IE4+ document.all.lampMap.areas.length = 0 document.all.lampMap.areas[0] = area1 document.all.lampMap.areas[1] = area2 document.all.lampMap.areas[2] = area3 document.all.lampMap.areas[3] = area4 } else if (document.getElementById) { // NN6 adheres to node model var mapObj = document.getElementById(“lamp_map”) while (mapObj.childNodes.length) { mapObj.removeChild(mapObj.firstChild) } mapObj.appendChild(area1) mapObj.appendChild(area2) mapObj.appendChild(area3) mapObj.appendChild(area4) // workaround NN6 display bug document.myIMG.style.display = “inline” } function changeToKeyboard() { document.myIMG.src = “cpu2.gif” document.myIMG.useMap = “#keyboardMap” } function changeToLamp() { document.myIMG.src = “desk3.gif” document.myIMG.useMap = “#lampMap” } </SCRIPT> </HEAD> <BODY> <H1>MAP Element Object</H1> MAP.areas CD-471 Appendix F ✦ Examples from Parts III and IV <HR> <IMG NAME=”myIMG” SRC=”cpu2.gif” WIDTH=120 HEIGHT=90 USEMAP=”#keyboardMap”> <FORM> <P><INPUT TYPE=”button” VALUE=”Load Lamp Image” onClick=”changeToLamp()”> <INPUT TYPE=”button” VALUE=”Write Map on the Fly” onClick=”makeAreas()”></P> <P> <INPUT TYPE=”button” VALUE=”Load Keyboard Image” onClick=”changeToKeyboard()”></P> </FORM> <MAP NAME=”keyboardMap”> <AREA HREF=”AlpaKeys.htm” SHAPE=”rect” COORDS=”0,0,26,42”> <AREA HREF=”ArrowKeys.htm” SHAPE=”polygon” COORDS=”48,89,57,77,69,82,77,70,89,78,84,89,48,89”> <AREA HREF=”PageKeys.htm” SHAPE=”circle” COORDS=”104,51,14”> </MAP> <MAP NAME=”lampMap”> <AREA HREF=”Shade.htm” SHAPE=”polygon” COORDS=”52,28,108,35,119,29,119,8,63,0,52,28”> <AREA HREF=”Base.htm” SHAPE=”rect” COORDS=”75,65,117,87”> <AREA HREF=”Chain.htm” SHAPE=”polygon” COORDS=”68,51,73,51,69,32,68,51”> </MAP> </BODY> </HTML> Chapter 23 Examples The following section contains examples from Chapter 23, “The Form and Related Objects.” FORM Object Properties action NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Compatibility ✓✓✓ ✓ ✓ ✓✓✓✓ FORM.action . CD-462 Part VI ✦ Appendixes Example You can use The Evaluator to examine the protocol property of the image. resetSelects() function. This general-purpose function loops IMG.src CD-463 Appendix F ✦ Examples from Parts III and IV through all forms on the page and all elements within each form. For every SELECT element,. Rotating Images <HTML> <HEAD> <TITLE>Image Object</TITLE> <SCRIPT LANGUAGE= JavaScript > // global declaration for ‘desk’ images array var imageDB // pre-cache the ‘desk’
Ngày đăng: 06/07/2014, 06:20
Xem thêm: JavaScript Bible, Gold Edition part 198 pdf, JavaScript Bible, Gold Edition part 198 pdf
