Dreamweaver MX: Creating Pop Up Windows from Images

Version: Dreamweaver MX
Level: Basic
Objectives: To create pop up windows from an image link using the Open Browser Window behavior in Dreamweaver MX
Tools & Techniques: Behaviors, Open Browser Window, JavaScript, Pop up windows

In this lesson you'll learn to open a new browser window from an image link.

Step 1: Creating a New Window from an Image

In this first example, we'll create a pop up window from an image already placed in our document. A common use for this is photo galleries where you have thumbnail images that when clicked, open a larger version of the image. Click the thumbnail below to open a larger version of the image.

If you're interested in learning how I created the irregular shaped image, check out the rounded corner tutorial in the Fireworks section.

1. Select the image you want to open a new window
2. With the image selected, go to your Behaviors Panel and click the plus (+) sign to open the drop down menu
3. Select the Open Browser Window action to bring open the dialog window
4. Type in the name of the file with the correct extension (.htm, .html, etc) or, better yet, use the Browse to file button to locate the file
5. Enter the width and the height of the window
6. If you want the window to popup without any attributes, leave the remaining options blank
7. Click OK to close the window and apply the settings

NOTE: Naming the window is optional. One reason you would name your pop up windows is if you wanted all links to open in the same pop up window.

For example, say you have 5 links on a page each opening pop up windows and you didn't name the windows or named each window differently. When the viewer clicked each link, there would be 5 pop up windows open.

If you want to ensure only one window is popped up at one time, assign all your popup windows the same name.

Step 2: Changing the Events

Depending on your current settings in the behavior panel, you may need to update the Event from onLoad to onClick. Do this if you want your viewers to click the image to load the new window.

If you prefer the popup window to automatically open when the page is loaded, (example: banner ads) leave the event to onLoad.

1. Click once on the behavior you just added to highlight the behavior
2. You should now see a black arrow pointing downward. Click on that arrow to open the drop down menu and change the onLoad to (onClick) Event.