Java Server Pages, Tomcat, Jsp, J2Ee, Servlets, Struts Blog

CD-111Chapter 12 .Images and Dynamic HTML image were in the page. By the time the entire page loads, all images generated in this way are tucked away in the image cache. You can then assign your cached image s src property or the actual image URL to the src property of the document image created with the tag: document.images[0].src = myImage.src The change to the image in the document is instantaneous. Listing 12-1 is a simple listing for a page that has one tag and a select list that enables you to replace the image in the document with any of four precached images (including the original image specified for the tag). If you type this listing as I strongly recommend you can obtain copies of the four image files from the companion CD-ROM in the Chapter 12 directory of listings (you must still type the HTML and code, however). Listing 12-1: Precaching Images

Image Object

Bands Clips Lamp Erasers

We would like to recommend you tested and proved virtual web hosting services, which you will surely find to be of great quality.

CD-110 Part II . JavaScript Tutorial (and set the image s border to zero) or attach a client-side image map to it. The combination of a link and image is how you make a clickable image button (the image type of form input element is not a scriptable object until IE4+ and NN6+). Interchangeable images The advantage of having a scriptable image object is that a script can change the image occupying the rectangular space already occupied by an image. In IE4+ and NN6+, the images can even change size, with surrounding content reflowing accordingly. The script behind this kind of image change is simple enough. All it entails is assigning a new URL to the image object s src property. The size of the image on the page is governed by the HEIGHTand WIDTH attributes set in the tag as the page loads. The most common image rollovers use the same size image for each of the rollover states. In NN3 and NN4, the image can t change size on the page, which causes a differently sized replacement image to scale to fit the original dimensions. Precaching images Images often take several extra seconds to download from a Web server. If you design your page so an image changes in response to user action, you usually want the same fast response that users are accustomed to in multimedia programs. Making the user wait many seconds for an image to change can severely detract from enjoyment of the page. JavaScript comes to the rescue by enabling scripts to load images into the browser s memory cache without displaying the image, a technique called pre- caching images. The tactic that works best is to preload the image into the browser s image cache when the page initially loads. Users are less impatient for those few extra seconds as the main page loads than waiting for an image to down load in response to some mouse action. Precaching an image requires constructing an image object in memory. An image object created in memory differs in some respects from the document image object that you create with the tag. Memory-only objects are created by script, and you don t see them on the page at all. But their presence in the document code forces the browser to load the images as the page loads. The object model provides an Imageobject constructor function to create the memory type of image object as follows: var myImage = new Image(width, height) Parameters to the constructor function are the pixel width and height of the image. These dimensions should match the tag s WIDTHand HEIGHT attributes. Once the image object exists in memory, you can then assign a filename or URL to the src property of that image object: myImage.src = someArt.gif When the browser encounters a statement assigning a URL to an image object s src property, the browser goes out and loads that image into the image cache. All the user sees is some extra loading information in the status bar, as if another
In case you need quality webspace to host and run your web applications, try our personal web hosting services.

Images and Dynamic HTML The previous eight lessons have been intensive, covering a lot of ground for both programming concepts and JavaScript. Now it s time to apply those fundamentals to the learning of more advanced techniques. I cover two areas here. First, I show you how to implement the ever-popular mouse rollover in which images swap when the user rolls the cursor around the screen. Then I introduce you to concepts surrounding scripted control of Dynamic HTML in the version 4 and later browsers. The Image Object One of the objects contained by the document is the image object. Unfortunately, this object is not available in all script able browsers. The earliest browsers that you can use this technique with are NN3 and IE4. Therefore, everything you learn here about the image object doesn t apply to NN2 (all versions) or IE3 (for Windows). Even so, I show you how to insert rollover code in pages so that it doesn t cause errors in earlier browsers. Because a document can have more than one image, image object references for a document are stored in the object model as an array belonging to the documentobject. You can therefore reference an image by array index or image name. Moreover, the array index can be a string version of the image s name. Thus, all of the following are valid references to an image object: document.images[n] document.images[ imageName ] document.imageName Each of the tag s attributes is accessible to JavaScript as a property of the image object. No mouse- related event handlers are affiliated with the image object (until you get to IE4+ and NN6+). If you want to make an image a clickable item in older browsers, surround it with a link 12 CHAPTER …. In This Chapter How to precache images How to swap images for mouse rollovers What you can do with Dynamic HTML and scripting ….
We recommend cheap and reliable webhost to host and run your web applications: Coldfusion Web Hosting services.

CD-108 Part II . JavaScript Tutorial 4. While a frameset is still loading, a JavaScript error message suddenly appears saying that window.document.navigation.form.selector is undefined. What do you think is happening in the application s scripts, and how can you solve the problem? 5. A script in a child frame of the main window uses window.open() to generate a second window. How can a script in the second window access the location object (URL) of the parent window in the main browser window? …
Go visit our java server pages services for a reliable, lowcost webhost to satisfy all your needs.

CD-107Chapter 11 .Scripting Frames and Multiple Windows window and frame belong to a document. So even after your reference targets a specific window or frame, the reference must continue helping the browser find the ultimate destination, which is generally some element of the document. Listing 11-3: A Subwindow Document

Enter text to be copied to the main window:

Just one more lesson to go before I let you explore all the details elsewhere in the book. I use the final tutorial chapter to show you some fun things you can do with your Web pages, such as changing images when the user rolls the mouse atop a picture. Exercises Before answering the first three questions, study the structure of the following frameset for a Web site that lists college courses: 1. Whenever a document loads into the description frame, it has an onLoad event handler that stores a course identifier in the framesetting document s global variable called currCourse. Write the onLoadevent handler that sets this value to history101 . 2. Draw a block diagram that describes the hierarchy of the windows and frames represented in the frameset definition. 3. Write the JavaScript statements located in the navigation frame that loads the file french201M.html into the mechanics frame and the file french201D. html into the description frame.
From our experience, we are can tell you that you can find a reliable and cheap webhost service at Java Web Hosting services.

CD-106 Part II . JavaScript Tutorial More about Window References In Chapter 8, you saw how to create a new window and communicate with it by way of the windowobject reference returned from the window.open()method. In this section, I show you how one of those subwindows can communicate with objects, functions, and variables in the window or frame that creates the subwindow. In scriptable browsers (except for Navigator 2), every window has a property called opener. This property contains a reference to the window or frame that held the script whose window.open() statement generated the subwindow. For the main browser window and frames therein, this value is null. Because the opener property is a valid window reference, you can use it to begin the reference to items in the original window just like a script in a child frame uses parentto access items in the parent document. The parent-child terminology doesn t apply to sub- windows, however. Listings 11-2 and 11-3 contain documents that work together in separate windows. Listing 11-2 displays a button that opens a smaller window and loads Listing 11-3 into it. The main window document also contains a text field that gets filled in when you enter text into a corresponding field in the subwindow. In the main window document, the newWindow()function generates the new window. Because no other statements in the document require the reference to the new window just opened, the statement does not assign its returned value to any variable. This is an acceptable practice in JavaScript if you don t need the returned value of a function or method. Listing 11-2: A Main Window Document

Text incoming from subwindow:

All of the action in the subwindow document comes in the onChange event handler of the text field. It assigns the subwindow field s own value to the value of the field in the opener window s document. Remember that the contents of each
Note: In case you are looking for affordable and reliable webhost to host and run your j2ee application check Vision J2ee Web Hosting services.

CD-105Chapter 11 .Scripting Frames and Multiple Windows // end –> Look first at the HTML section for the Body portion. Almost everything there is standard stuff for defining client-side image maps. The coordinates define rectangles around each of the arrows in the larger image. The HREF attributes for the two areas point to JavaScript functions defined in the Head portion of the document. In the frameset that defines the Decision Helper application, names are assigned to each frame. The upper-right frame is called entryForms; the bottom frame is called instructions. Knowing that navigation from page to page in the upper-right frame requires knowledge of which page is currently loaded there, I build some other scripting into both the parent document and each of the documents that loads into that frame. A global variable called currTitleis defined in the parent document. Its value is an integer indicating which page of the sequence (1 through 5) is currently loaded. An onLoadevent handler in each of the five documents (named dh1.htm, dh2.htm, dh3.htm, dh4.htm, and dh5.htm) assigns its page number to that parent global variable. This arrangement allows all frames in the frameset to share that value easily. When a user clicks the right-facing arrow to move to the next page, the goNext() function is called. The first statement gets the currTitle value from the parent window and assigns it to a local variable: currOffset. An if…else construction tests whether the current page number is less than five. If so, the add-by-value operator adds one to the local variable so I can use that value in the next two statements. In those next two statements, I adjust the content of the two right frames. Using the parent reference to gain access to both frames, I set the location.href property of the top-right frame to the name of the file next in line (by concatenating the number with the surrounding parts of the filename). The second statement sets the location.hash property (which controls the anchor being navigated to) to the corresponding anchor in the instructions frame (anchor names help1, help2, help3, help4, and help5). A click of the left-facing arrow reverses the process, subtracting 1 from the current page number (using the subtract-by-value operator) and changing the same frames accordingly. The example shown in Listing 11-1 is one of many ways to script a navigation frame in JavaScript. Whatever methodology you use, much interaction occurs among the frames in the frameset.
Go visit our java server pages services for a reliable, lowcost webhost to satisfy all your needs.

CD-104 Part II . JavaScript Tutorial Figure 11-3: The Decision Helper screen Listing 11-1: A Graphical Navigation Bar