Creating PopUp Windows in Dreamweaver 8

Using thumbnails instead of an original picture cuts the download of your Web page. In this activity we are going open the larger picture in Fireworks. I am using a picture of my niece and nephew's new dog named Buddy.

PopUp Windows in Dreamweaver 8

Export the picture and call it buddylarge for example. Now we need to make a smaller picture, or the thumbnail. In
Fireworks click Modify>Canvas>Image Size.

Modify Image Size

Make sure the Constrain proportions box is checked. You will change the top number in the box (which is now 365) to a lower number making it smaller in size. We will change the 365 to 150. Export it again and call it small buddy.

Image Size Dialog Box

In Dreamweaver Insert the small picture of Buddy on the page by clicking the Insert Image tool on the Insert Toolbar:

Insert Image

You should now have the small picture placed in your document in Dreamweaver. It should look like the picture shown below:

Thumbnail File for PopUp Window in Dreamweaver 8To get a better look at me, click on my picture.

First you will need to create the page that holds the large picture of Buddy. Open a new document in Dreamweaver 8 and insert the large picture on the page. Save it.

Go back to the Dreamweaver document that contains the thumbnail of your image. Click on the image to select it and then go to your Behavior Panels (if it is not visible click Window>Behavior) and click the plus (+) sign to open the drop down menu. Select the Open Browser Window action to bring open the dialog window. I used the following settings for my popUp:

PopUp Setting

Now we need to add an event. Look at the Behaviors panel. You will notice the Open Browser Behavior.

Open Browser Window

We want to make sure that it is an (onClick) Event. Click on the behavior (onFocus in the above example) and select onClick from the drop down menu.

Now return to the document page that just contains the large picture of Buddy. We are now going to include text that when clicked on will close the window. Put your cursor just behind the picture and while holding down the shift key click Enter. This will place your cursor just under the picture not double spaced.

Make sure your cursor is center then key (type) Close Window. Select the text and in the Property inspector, add the following code:


JavaScript Code to Close Window

Save your document and try it out in a browser window.