Create a popup window with an image

Introduction

In this tutorial we will explain how to create a popup window with an image from a link.

Simple Layer Popup with an image

1. Create a new page.

Open a new page in Dreamweaver. Of course an existing one will do well also.

2. Add a link to the Layer Popup.

Put in some text or an image that will serve as a link that the user can click to open the image in a Layer Popup. When you use text as a link put a # in the Link section of the Properties box.

3. Insert the popup window behavior.

You need to save your file right now to be able to apply the Advanced Layer Popup behavior. Select the link by clicking on it. Choose Advanced Layer Popup from the Behaviors panel.

This will open the Advanced Layer Popup Panel.

In Display you can browse to the image file you would like to display.
Name your window, choose a window style and if you would like the window to close automatically, enter the seconds.

In Dimensions & Position the width and height are automatically displayed.
You can specify where on the users screen you would like the Layer Popup to appear.

In Transitions you can specify the incoming and outgoing transition effects.

Click ok.

4. Change the Event for the Layer Popup

You can change the event for the Layer Popup. When should the Layer Popup be displayed. When the behavior was placed on an object then the default is onClick, when the body was selected the default is onLoad.

The most common options to use are:

onLoad: The Layer Popup will appear as soon as the page is loaded

onClick: The Layer Popup will appear when the user clicks on the link.

onDblClick: The Layer Popup will appear after the user double-clicks on the link.

onMouseOver: The Layer Popup will appear when the user moves over the link with the mouse.

5. Save the file in your site

You will need to save the file in your site. You can preview the page in your browser by pressing F12.