web design course - Pop-up windows

Hi Glyn,

The most common solution for this is to use the Dreamweaver Open Browser Window behaviour.

If you're not sure what the dimensions of your full-size image are, you can insert it temporarily on your web page, select it and check the properties panel to see the Width and Height. Remember these values or write them down, then remove/delete the image from you page.

A behaviour needs to be attached to an element on the page, not just plain text. So you need to have a smaller version of your image, or a link, or form element (eg. button).

Insert your 'thumbnail' (smaller version) image on the page. You can also type some text, and make sure it's a link by linking to hash (#), but the user will be jumped to the top of the page when they click the link if you do this. Thumbnails look better.

Select the thumbnail image, then go to the behaviours panel in Dreamweaver. If you can't see the behaviours panel, you can select it from Window -> Behaviours. Click the [+] button, and select Open Browser Window from the menu.

In the dialogue box, you can specify which file is to be shown in the new pop-up window. This can be either your larger graphic file, or a HTML file/web page containing your graphic.

Now you can enter the dimensions of the new window. You should add on 20 pixels to the width and height amounts you remembered earlier, as you'll want a bit of padding, and allow for some of the window's components. You'll notice you can also control what elements the new window has. I would recommend allowing your visitors to resize the new pop-up window, and possibly allow them to scroll, too. Other elements such as Location, Navigation Menu and Status bar can be left turned off.

Once you click OK, a new behaviour will appear in the behaviour panel. Ensure the 'event' column is set to OnClick. If you can't find the OnClick event, you may need to increase your event choices by choosing a higher browser version under 'Show Events For...' which at the bottom of this same menu.

You may need to adjust the width and height settings after testing. To do this, ensure the thumbnail is selected, look in the browser window, and double click the behaviour to bring the dialogue box back up.

Also, as a bonus tip, please don't make the mistake of using just one big image file as the source for your thumbnail (smaller) image AND the larger full-size version. Always export an additional smaller file for your thumbnail. This is the whole point of having an enlarge pop-up. Too often, I see images on web sites which have been 'squashed' using WIDTH= and HEIGHT= in the HTML code, instead of resized in a program like Photoshop and exported. This causes web pages to load much slower, and doesn't look as good.

I hope this helps.

Regards, Rich