Creating an Image Rollover argument passed to the function. This code changes the src property of that argument to the "on" version of the image. The call to the eval() function concatenates the argument with the string On.src. If the argument to the function is button, the function call returns buttonOn.src. As you can see in the preload code, buttonOn.src is set to on.gif. So, this line of code changes the src property of the referenced object to on.gif. For all this to work, you have to create images in your preload code with the same name as the images to which they correspond on the page. That way, the single argument to the function can be used to reference both the image objects created when the page was loaded and the image on the page itself. The code in the deactivate function works the same way, except that it assigns the "off" image to the image object on the page. Calling the Functions After all the code used to drive the rollover functions is in place, the next step is to place the image and event handlers on the page. Rollovers use the onmouseover and onmouseout event handlers associated with anchor tags to fire the image-swapping functions. In this example, we're going to place the image itself within a link, but we could just as easily associate the image rollover with a text link elsewhere on the page. The only thing different about the image tag in this example is that the name attribute is included so that we can associate the name that we used in the preload code with the image. Here's the code that is used to place the image itself and fire the rollover functions: <a href="rollover.html" onmouseover="activate('button')" onmouseout="deactivate('button')"> <img name="button" border=0 height=100 width=100 src="off.gif"></a> As you can see, the link includes onmouseover and onmouseout attributes, which indicate the function that should be called when those events fire. The argument to the functions corresponds to the image name that we used. Putting It All Together When you've created your images and saved them in the proper folder, this code will create a dynamic page with images that turn on and off. The full source code for the page with the rollover is shown as follows: Input <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>JavaScript Rollover Example</title> <script type="text/javascript" language="JavaScript"> <! // Preload the images for the rollover file:///G|/1/0672328860/ch13lev1sec3.html (3 von 4) [19.12.2006 13:49:35] Creating an Image Rollover if (document.images) { buttonOn = new Image(); buttonOn.src = "on.gif"; buttonOff = new Image(); buttonOff.src = "off.gif"; } // Function to replace the off images with on images. function activate(image_name) { if (document.images) { document[image_name].src = eval(image_name + "On.src"); } } function deactivate(image_name) { if (document.images) { document[image_name].src = eval(image_name + "Off.src"); } } // > </script> </head> <body> <a href="rollover.html" onmouseover="activate('button')" onmouseout="deactivate('button')"><img name="button" border="0" height="100" width="100" src="off.gif"></a> </body> </html> file:///G|/1/0672328860/ch13lev1sec3.html (4 von 4) [19.12.2006 13:49:35] Summary Summary JavaScript offers many exciting new possibilities for web developers. You explored several possible applications of JavaScript in this chapter, including generating bits of HTML code and verifying form data. JavaScript isn't the only way to write code for web pages, however. Java, the big brother of JavaScript, has even greater flexibility and capabilities. In Lesson 15, "Creating Applications with Dynamic HTML and AJAX," you'll learn how JavaScript forms the foundation for a group of technologies collectively known as Dynamic HTML. file:///G|/1/0672328860/ch13lev1sec4.html [19.12.2006 13:49:35] Workshop Workshop The following workshop includes questions, a quiz, and exercises related to the uses of JavaScript. Q&A Q Can you point me in the direction of more scripts that I can integrate with my pages? A Sure, there are lots of sites with prepackaged JavaScript programs that you can use on your pages. You might try The JavaScript Source at http://javascript.internet.com/, or JavaScript.com at http://www.javascript.com/. Q I've seen the source for other image rollover scriptswhy are they so different from the one in this lesson? A Image rollovers are one of the most popular uses of JavaScript, and over the years, opinions on how to write the perfect image rollover have changed. Plus, the bottom line is that there's more than one way to do it. As long as the script works in the browsers that the person who wrote the script cares about, it works. The technique demonstrated in this lesson will work fine, but if you see a script out there that you like better, feel free to use it instead. Quiz 1. What's an inline <script> tag? 2. What happens whenever a user clicks a link, button, or form element on a web page? 3. What's the this statement? 4. How can arrays streamline a script? 5. How does form validation with JavaScript conserve server resources? file:///G|/1/0672328860/ch13lev1sec5.html (1 von 2) [19.12.2006 13:49:36] Workshop Quiz Answers 1. An inline <script> tag is one that is embedded in the <body> section of an HTML document rather than in the <head> section, as is the more common practice. 2. Whenever a user clicks a link, a button, or any form element, the browser generates an event signal that can be trapped by one of the event handlers mentioned in Lesson 2, "Preparing to Publish on the Web." 3. The this statement is a special value that tells JavaScript to reference the current object without having to worry about its exact name or location. 4. With arrays, you can create a single list of variables that are all referenced by the same variable name. 5. JavaScript enables you to do error checking in forms on the browser side before the form is ever submitted to the server. A CGI script must access the server before it can determine the validity of the entries on a form. (Note that even if you use JavaScript form validation you must validate user input on the server as well, because users can bypass the JavaScript if they choose.) Exercises 1. Add new links to your list of random links in Exercise 13.3 by increasing the value assigned by new MakeArray( value ) and adding the new links to the list following the array elements already defined. 2. Take the registration form example used in Exercise 13.4 and see whether you can adapt it to a form of your own on your own website. file:///G|/1/0672328860/ch13lev1sec5.html (2 von 2) [19.12.2006 13:49:36] Lesson 14. Working with Frames and Linked Windows Lesson 14. Working with Frames and Linked Windows In the early days of the Web, two significant limitations of web browsers were that they could only display one document in a browser window at a time and that sites couldn't open more browser windows if needed. Frames enable you to divide the browser window into sections, each containing a different document, and linked windows enable you to create links that open pages in new browser windows. Used properly, these two techniques can make your website easier to navigate. Unfortunately, they can also be misused to make your site confusing, difficult to use, and annoying to your users. In this lesson, you'll learn how to apply these techniques to make your site more usable. In this Lesson Today, you'll learn all about the following topics: ● What frames are, how they can affect your layout, and who supports them ● How to work with linked windows ● How to work with frames ● How to create complex framesets ● Floating frames file:///G|/1/0672328860/ch14.html [19.12.2006 13:49:36] What Are Frames and Who Supports Them? What Are Frames and Who Supports Them? Today you'll learn about the tags that you can use to create frames. Simply put, frames enable you to divide a browser window and load a different document in each section of the window that you define. Due to the nature of these tags, web pages that use frames simply can't be displayed in really old browsers. They were introduced as a new feature with Netscape Navigator 2.0, which is several years old. Frames rapidly became popular, and they were included in the HTML 4.01 standard. Every popular web browser supports them these days. With version 3.0 of Internet Explorer, Microsoft introduced floating frames. Instead of dividing the browser window into sections, floating frames enable you to include frames inline in your documents, the same way you can with images. Floating frames were also included in the HTML 4.01 standard, and they're supported by all versions of Netscape since 2.0 as well as every version of Internet Explorer since 3.0. Frames give you an entirely different level of layout control than you've had so far in this book. For example, take a look at the example in Figure 14.1. Figure 14.1. A sample web page with frames. [View full size image] file:///G|/1/0672328860/ch14lev1sec1.html (1 von 2) [19.12.2006 13:49:36] What Are Frames and Who Supports Them? On this screen, you see four frames displayed within one browser window. The left frame contains graphical navigation elements, the lower-right frame contains text navigational links, the upper-right frame contains the page header, and the middle-right frame contains the main content of the site. This screenshot also illustrates one of the disadvantages of using frames. The frame that contains the actual page content actually uses a fairly small section of the browser window; the rest of the window is consumed by the other frames. When you separate your layout using frames, you can detract from the important content on your site. Because the information displayed on the page is separated into individual frames, the contents of a single frame can be updated without affecting the contents of any other frame. If you click on one of the linked images in the left frame, for example, the contents of the large frame on the right are automatically updated to display the details about the subject you've selected. When this update occurs, the contents of the left frame and the bottom frame aren't affected. file:///G|/1/0672328860/ch14lev1sec1.html (2 von 2) [19.12.2006 13:49:36] Working with Linked Windows Working with Linked Windows Before you learn how to use frames, you need to learn about the target attribute of the <a> tag. This attribute takes the following form: target="window_name" Usually, when you click a hyperlink, the page to which you're linking replaces the current page in the browser window. When you use the target attribute, you can open links in new windows, or in existing windows other than the one that the link is in. With frames, you can use the target attribute to display the linked page in a different frame. A frameset is a group of frames that's defined within a framed document through the use of the <frameset> tags. The target attribute tells the web browser to display the information pointed to by a hyperlink in a window called window_name. Basically, you can call the new window anything you want, except that you can't use names that start with an underscore ( _). These names are reserved for a set of special target values that you'll learn about later in the "Magic target Names" section. When you use the target attribute inside an <a> tag, a frames-compatible browser first checks whether a window with the name window_name exists. If it does, the document pointed to by the hyperlink replaces the current contents of window_name. On the other hand, if no window called window_name currently exists, a new browser window opens with that name. Then the document pointed to by the hyperlink is loaded into the newly created window. Task: Exercise 14.1. Working with Windows Framesets rely on the target attribute to load pages into specific frames in a frameset. Each of the hyperlinks in the following exercise uses the target attribute to open a web page in a different browser window. The concepts you'll learn here will help you understand later how targeted hyperlinks work in a frameset. In this exercise, you'll create four separate HTML documents that use hyperlinks, including the target attribute. You'll use these hyperlinks to open two new windows called yellow_page and blue_page, as shown in Figure 14.2. The top window is the original web browser window (the red page), yellow_page is at the bottom left, and blue_page is at the bottom right. Figure 14.2. Using the target attribute indicates that links should open new windows. [View full size image] file:///G|/1/0672328860/ch14lev1sec2.html (1 von 7) [19.12.2006 13:49:37] Working with Linked Windows First, create the document to be displayed by the main web browser window, shown in Figure 14.3, by opening your text editor of choice and entering the following lines of code: Input <html> <head> <title>Parent Window - Red</title> </head> <body bgcolor="#ff9999"> <h1>Parent Window - Red</h1> <p><a href="yellow.html" target="yellow_page"> Open</a> the Yellow Page in a new window. <br /> <a href="blue.html" target="blue_page">Open</a> the Blue Page in a new window. </p> <p><a href="green.html" target="yellow_page">Replace</a> the yellow page with the Green Page.</p> </body> </html> Output file:///G|/1/0672328860/ch14lev1sec2.html (2 von 7) [19.12.2006 13:49:37] . however. Java, the big brother of JavaScript, has even greater flexibility and capabilities. In Lesson 15, "Creating Applications with Dynamic HTML and AJAX," you'll learn how JavaScript. than the one that the link is in. With frames, you can use the target attribute to display the linked page in a different frame. A frameset is a group of frames that's defined within a. left frame contains graphical navigation elements, the lower-right frame contains text navigational links, the upper-right frame contains the page header, and the middle-right frame contains the