The confirm() Method, with an - Javascript Goodies

Up to this point, each of the JavaScripts you’ve built has dealt with altering, changing, or writing text to the page. Sure, there’s been some color, but there has to be more than text manipulation in JavaScript. In this chapter, you’ll start to look at manipulating images, opening new windows, and offering users a choice, rather than simply taking information from them.

Lesson 17: An Image Flip Using onMouseOver and Preloading Images

An image flip is a great effect. Some people call it a mouse rollover or an image rollover. The user rolls her mouse pointer over an image, and it changes to a new image. When the mouse leaves the image, the image changes back. It’s a very popular event on the Web.

JavaScript Goodies

88

This example goes back to the use of the onMouseOverandonMouseOutevent handlers. You use the event handler to affect not only text, but also the space the image is sitting in.

Here’s the script:

<A HREF=”http://www.cnn.com”

onMouseOver=”document.pic1.src=’menu1on.gif’”

onMouseOut=”document.pic1.src=’menu1off.gif’”>

It’ll take two figures to show you this one. Take a look at Figures 4.1 and 4.2.

Figure 4.1

The page looks like this when the mouse is off the image.

You can see the effect on your own computer by clicking Lesson Seventeen Example in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/

lesson17example.html.

In this example—and the ones that follow, for that matter—the images are all the same size. You don’t need to use same-size images for your image flips, but it’s a good idea. It really heightens the look.

Notice again that there is no need for the <SCRIPT>and</SCRIPT>tags. You’re using event handlers again. The JavaScript onMouseOverandonMouseOutevents are built into an

<A HREF>HTML flag, so not only is this an image flip, it’s also a hypertext link.

Also notice that by including BORDER=”0”in the <IMG SRC>tag, no link box appears around the image.

Deconstructing the Script

From what you already know about event handlers, you should be able to go a long way toward picking this one apart by yourself. When the mouse is off the image space, the imagemenu1off.gifis displayed. That’s the image displayed when the page first loads; it’s also the image called for in the <IMG SRC>flag. When the mouse is on the image, the menu1on.gifimage is shown.

The

NAME

Attribute

Notice the <IMG SRC>flag has been given a NAME=attribute. In this example, the name given to the image—or more correctly, the space the image is occupying—ispic1.

ThatNAME=attribute becomes quite important if you want to put multiple image flips on the same page. For every new image flip you put on the page, you must choose a different name for the new image space. Here’s an example of three image flips in a row:

<A HREF=”http://www.htmlgoodies.com”

onMouseOver=”document.pic1.src=’menu1on.gif’”

onMouseOut=”document.pic1.src=’menu1off.gif’”>

<A HREF=”http://www.developer.com”

onMouseOver=”document.pic2.src=’menu1on.gif’”

onMouseOut=”document.pic2.src=’menu1off.gif’”>

Figure 4.2

When the mouse is on the image, the message changes.

JavaScript Goodies

90

<A HREF=”http://www.javagoodies.com”

onMouseOver=”document.pic3.src=’menu1on.gif’”

onMouseOut=”document.pic3.src=’menu1off.gif’”>

Not only were the links changed to new locations, but notice also that all the names were changed, both in the <IMG SRC>and in the hierarchy statements.

The Hierarchy Statement

The name of the space the image is sitting in, pic1in this case, is referenced in the hier-archy statement referenced by the onMouseOverandonMouseOutstatements. The hierarchy statement,document.pic1.src, reads this way:

windowis implied. You could have written this with the object windowat the begin-ning, but as you read in Lesson 13 in Chapter 3, “Manipulating Data and the

Hierarchy of JavaScript,” it is not necessary. JavaScript simply assumes all that is going on is going on inside a browser window.

documentrefers to the current HTML document object.

pic1is the name of the space the image will occupy. You swap out images within a space occupied by an image, and you make up that NAMEand stick it in the <IMG SRC>

flag.

srcis a property of the image object that enables you to load a new image into the current image’s space.

When the mouse passes over the space occupied by the image, the onMouseOverevent han-dler springs into action, replacing the menu1off.gifimage with the menu1on.gifimage.

The process might take a second or two to allow the image that will display to be loaded into the browser. But you can cut down on that time by preloading the image.

Preloading Images

Through JavaScript, you can set up code that downloads images into the user’s browser cache for later use. Using the previous image flip code, the menu1off.gifimage loads to the cache because it is being called for by the HTML document in the <IMG SRC>.

If the term cache is new to you, here’s what’s so great about it: The cache is a section of your hard drive, set aside by your browser, so it can store files after it has displayed them for you. Have you noticed how much faster a page loads after you’ve first seen it? That’s because the browser is not reading the images and text from the server anymore. It is read-ing them from your hard drive.

By pre-caching, or preloading, images for your user, when she starts to use the image flip, the browser works quickly the first time without having to contact the server again for the image it wants to display. It’s a very clever way of doing things.

Here, you need to call for the menu1on.gifto load into the cache with the rest of the page.

Then, when the image flip is called for, the menu1on.gifis there ready and waiting to be posted. The flips will go much faster the first time around because the browser isn’t waiting for the server to be contacted and the new image to be loaded.

Here’s the code that performs the preload:

Image1= new Image(200,200)

Image1.src = “menu1on.gif”

</SCRIPT>

The preload occurs thanks to a completely different script from the image flip. The format follows this pattern:

Image1 = new Image(200,200)assigns a variable name to a new image that is 200 pix-els wide by 200 tall. The script doesn’t know what the image is yet; it just knows that now the image will be brought into the cache under that variable name.

Image1.src = “menu1on.gif”tells the JavaScript the source, or path, to find the image.

The preceding JavaScript loads the image into the browser cache under the variable name Image1. But the name used to pull the image into the cache becomes immaterial because you never call for the image by that variable name. You call for it only by its true, or literal, name:menu1on.gif.

The purpose of the preceding JavaScript is to load the image to the browser cache, period.

The variable names assigned mean nothing past a format you must use to get that behind-the-scenes download to occur.

Let’s say you had multiple images to download. Again, the variable names don’t matter, so you might as well just keeping adding one to the variable name Image1. Preloading three images might look like this:

Image1= new Image(200,200) Image1.src = “menu1on.gif”

JavaScript Goodies

Notice each new two-line command group is given a new variable name and a new image to preload. The height and width parameters have also changed to fit the image.

Put this script between the <HEAD>flags in your script, and the preloaded images should be waiting in the cache when your user tries the image flips for the first time.

Your Assignment

Take this sample code and add a few comments so that when the mouse is on the image, the status bar reads, Oh, Click it!Then, when the mouse is off the image, the status bar should read, Click to go!

Here’s a hint: return true.

To see a possible answer on your own computer, click Lesson Seventeen Assignment in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/

assignment17.html.

Lesson 18: An Image Flip with a Function

Here is another example of onMouseOverandonMouseOutevent handlers being used to create an image flip effect. But this time, instead of including the JavaScript statements to swap pictures in the <A HREF>tag, the event is called for in a function.

To show you where each of the parts should be placed on your page, this display includes the entire HTML document format:

<HTML>

}

</SCRIPT>

</HEAD>

<BODY>

<h2>Sample Animation</h2>

<A HREF=http://www.htmlgoodies.com onMouseOver=”up()”

➥ onMouseOut=”down()”; return true>

</BODY>

</HTML>

It’s a simple image flip animation with onMouseOverandonMouseOutevent handlers in a function. In the example, if you mouse over and out quickly, this looks like an animation of a stick figure doing jumping jacks.

Andree did the artwork shown in Figures 4.3 and 4.4. I take no responsibility for that.

Figure 4.3

The stick figure stands up straight when the mouse is off the image.

You can see the man (I think it’s a man) doing jumping jacks on your own computer by clicking Lesson Eighteen Example in your download packet, or see it online at http://

www.htmlgoodies.com/JSBook/lesson18example.html.

There aren’t a whole lot of external words on the page. I just took the preceding code and pasted it into an HTML document.

JavaScript Goodies

94 Deconstructing the Script

In this example you are calling for two different images, so you need two separate func-tions. Here’s what they look like:

function up() {

document.mypic.src=”up.gif”

}

function down() {

document.mypic.src=”down.gif”

}

</SCRIPT>

Look again at the format for creating a function.

The command functionis followed immediately by the name of the function followed by the two parentheses. In this case, the parentheses are empty because you are passing noth-ing to the function. Later in the book, we’ll discuss puttnoth-ing parameters into the parenthe-ses so that information can be passed to the function. The commands that make up the function are housed within left and right braces ({}).

Figure 4.4

The figure does a jumping jack when the mouse is on the image.

The functions are equal to the statements used in the previous JavaScript lesson on image flips. Remember the hierarchy statements? Here the function contains the statements, rather than adding them into the <A HREF>flag.

The format for the hierarchy statement is document, and then comes the NAMEassigned to the image space, and finally the SRCpath to the image.

The two functions were named up()anddown(). The names could have been just about anything, but we used these two because of the actual position of the man doing jumping jacks.

Calling for the Function

Now let’s look at the call for the function:

<A HREF=”http://www.htmlgoodies.com” onMouseOver=”up()”

➥ onMouseOut=”down()”; return true>

The format is close to that used in Lesson 15 (see Chapter 3), but a function is called on here, rather than the hierarchy statement being included in the HREFcommand itself.

By calling for the function name following onMouseOverandonMouseOff, in effect, what is included in the function statements is replaced with the function name.

The code onMouseOver=”up()”basically means this:

onMouseOver=”document.mypic.src=’up.gif’”

More Than One Image Flip

Remember from Lesson 17, earlier in this chapter, that if you want to create multiple image flips on a page, you must continue using new NAME=attributes to separate each image space in the browser’s mind? It’s the same thing here, except now you must create whole new function names in addition to new NAME=attributes.

For example, suppose you want to place on the page another JavaScript image flip, similar to the first example. You would create two new functions by copying and pasting the same functions shown earlier and altering the function name. The easiest and quickest method is to add the number 2.

Then, you also have to change the NAME=. So, you change the name to mypic2. But be sure you change the name of the image space every time it appears.

JavaScript Goodies

96

Now you get code that looks like this in the HEADcommands:

You also get code like the following to call for the two different images:

<A HREF=”http://www.htmlgoodies.com” onMouseOver=”up()”

➥ onMouseOut=”down()”; return true>

<a href=”http://www.htmlgoodies.com” onMouseOver=”up2()”

➥ onMouseOut=”down2()”; return true>

See how the new functions are linked to a specific image space through the NAME=, and all the image space names were changed? Follow that process every time you add a new image flip, and you can put hundreds on the same page. Well, maybe not hundreds—just about 100 will probably do the trick.

Preloading Those Images

Keep in mind that you can help your viewer along by preloading the images that will be called for in the flip.

Here again is the format:

Image1= new Image(200,200)

Image1.src = “menu1on.gif”

</SCRIPT>

It’ll help your user greatly because she won’t be sitting around waiting.

Your Assignment

First, you need to get four images. If you can supply them, that’s great. If not, I have four for you at

http://www.htmlgoodies.com/JSBook/img1.gif http://www.htmlgoodies.com/JSBook/img2.gif http://www.htmlgoodies.com/JSBook/img3.gif http://www.htmlgoodies.com/JSBook/img4.gif

Download them into your computer. Use the function and code shown earlier to make img1.gifandimg2.gifto create an image flip, and then get img3.gifandimg4.gifto do an image flip. You will create two image flips from the preceding code.

TIP

Watch the order in which you put the images in the function. You’ll know you have it right when you roll your pointer over the image and it flips correctly. If it stays flipped, you’re out of order.

To see a possible answer on your own computer, click Lesson Eighteen Assignment in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/

assignment18.html.

Lesson 19: Opening New Windows

This is the first of two lessons about opening a new window through JavaScript. This first new-window lesson deals with the JavaScript commands you would use to open a new window that displays a second HTML document.

Let’s get started with a basic script:

window.open(‘opened.html’,’joe’,config=’height=300,width=300’)

</SCRIPT>

The script’s effect appears in Figure 4.5.

JavaScript Goodies

98

You can try the script yourself by clicking Lesson Nineteen Script’s Effect in your download packet, or see it online at http://www.htmlgoodies.com/JSBook/lesson19example.html. Figure 4.5

The script opens a new window.

NOTE

This script only opens the window. The links that appear in the new window were written on the HTML page that filled the new window, but what about those links in the new window?

They’re functional, too.

If you look at this example in your download packet or online, you’ll see that a link in the little window loads a new page in the big window, and then you’ll see a link closes the lit-tle window. It’s like fireworks at a fairground. You can even say “Oooo” and “Ahhh,” if the mood strikes you.

I’ll get to those links in the little window and how they are written to control the main window, as well as how to close the window itself, later in this chapter.

Deconstructing the Script

Let’s start by talking about the placement of this script in your HTML document. Until now, I have always said it’s good to place scripts up high in the document so they can run early in the page load. When you’re dealing with a function, the script goes up in the head commands. Here, I would like to make a different suggestion.

If you’re going to open a second window, put the commands that do it down pretty low in the HTML document. In fact, make them last. The reasoning is simple: The page loads—

then the new window pops up. If you have the commands first, the new window pops up before the viewer gets to see what’s there in the big window. There’s also a greater chance that the user will close the little window before it can be used.

That’s just my opinion, of course. You can actually place this script anywhere in the docu-ment you want. It’ll run from wherever it sits. I just think the order of the window pop-ping last is more beneficial to your viewers.

Let’s look at the basic window-opening code again:

window.open(‘opened.html’,’joe’,config=’height=300,width=300’)

</SCRIPT>

The code window.open couldn’t be more blatant. windowis the object, and openis the

In document Javascript Goodies (Page 114-137)