MX: Creating Pop Up Windows from Images
Objectives: To create pop
up windows from an image link using the Open
Browser Window behavior in Dreamweaver MX
Tools & Techniques: Behaviors,
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
tutorial in the Fireworks section.
- Select the image you want to open a new window
- With the image selected, go to your Behaviors
click the plus (+) sign
to open the drop down menu
- Select the Open Browser Window action
to bring open the dialog window
- 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
- Enter the width and the height of the window
- If you want the window to popup without any attributes,
leave the remaining options blank
- 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.
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
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.
- Click once on the behavior you just added to highlight
- You should now see a black arrow pointing downward.
Click on that arrow to open the drop down menu and change
onLoad to (onClick) Event.