Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition) P51 pdf
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (215.43 KB, 10 trang )
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
or JavaScript.com at
/>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]
