In JavaScript, there is a concept known as "events". An event is when someone clicks the mouse, double clicks the mouse, rolls over something, rolls out of something, and so forth. Generally speaking, these events cause something to happen.

Common events include:

• onClick (the user clicks something)
• onDoubleClick (the user double-clicks something)
• onMouseDown (the user presses the mouse button down)
• onMouseUp (the user releases the mouse button)
• onMouseOver (the user moves the mouse over something -- used in rollovers)
• onMouseOut (the user moves the mouse off of something -- also used in rollovers)
• onLoad (do something when the page loads, like load those annoying pop-under windows)
• onUnLoad (do something when someone leaves the site, like beg for a magazine subscription)

There are others, but these are the ones commonly used.

Therefore, in a simple rollover like the ones most of you use in Dreamweaver already, two JavaScript commands are called. The first is onMouseOver. When the user moves the mouse over the image, JavaScript changes the image to the rollover image. The second is onMouseOut. When the user moves the mouse off the image, the "off" image is replaced with the current "on" image.

---

Popup Window

Now that we know a little bit about this, let's make a popup window for a basic web page.

1. Open a new window. This will become your popup window. Put something in it, like "This is my spiffy nifty cool popup window!"

2. Save the file as popup.html.

3. Open another new window. Type the words, "Click here to get a cool popup window." Highlight the words "Click here". In the "link" area on the Properties palette, type "#".

4. Go to Window - Behaviors to open the Behaviors palette.

5. Click on the "+" in the upper left hand corner. Pick "Open Browser Window".

6. A dialog box will come up:

• In "URL to Display", browse to find your popup window (popup.html).
• In "Window Width" and "Window Height", enter the size, in pixels, of the window size you want for your popup window. For now, let's make it 100 x 100 pixels.
• Attributes: These are what you want showing in your popup window. Normally, designers check on "scrollbars as needed" and "resize handles", because these will allow people to resize the popup as needed to view the content.
• Window Name: optional unless you're doing really crazy JavaScript stuff. For now, leave it blank.
• Click "OK" when everything is set.

7. Now look at your behaviors palette. There are two columns, Events and Actions. Under "Events", what JavaScript call does it list? It might say onMouseOver, meaning that if you roll the mouse over the link, the popup window comes up. What if you wanted to click the link (as you normally would) to get the popup window?

In this case, click on the word onMouseOver to highlight the line, then hit the down arrow that appears.

8. Save your document (I called mine test.html) and test it. Did it work? Did you need to resize things? If so, go back to your Behaviors palette, double-click on your behavior, and change the window size settings.

Click here

---

Close Window

One thing your little popup window is missing is a "close window" button. I just so happen to have one here that you may use (right click and pick "save as"):

Insert this image into your popup.html window.

Now copy and paste this line into the "link" box while you have the image selected:

javascript:window.close();

Save and go back to test.html. Try the button. Did it work?