Creating Pop-ups from Images

This work is licensed under a Creative Commons License.

Creating Pop-ups from Images

CBTcafe

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.

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 5.to locate the file
6.Enter the width and the height of the window
7.If you want the window to popup without any attributes, leave the remaining options blank

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.

Top