Hi,

if I am putting a hyperlink on a image so that the image opens up full-size when clicked on, how can I get this to open in a pop-up window which is the same size as the larger image, rather than a full browser window?

Thanks,
Glyn.

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

In additional to the bonus tip, one of the main problems for slow loading images is that they have not been optimised for the web. So when you come to save the image whilst using an application such as photoshop, make sure that you use they save for web option as this will actually shrink the file size. This smaller file size means that the image will load much faster than if you just reduce the size of the image.

Remember the smaller the file size the faster it will load.

David