Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CC
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Adding a Larger Image Pop Up Window

  • We are going to open a new window showing a larger version of an image when we click on the smaller version of the image
  • We will use Dreamweaver Behaviors to create the JavaScript code to do this
  • Create a new web page and name it open-window.html
  • Add the barcelona1-thumb.jpg image to the page and give it an id of thumb
  • Open the Tag Inspector and choose the Behaviors button
  • Click the + sign and choose the Open Browser window option
  • Insert the correct information, choosing barcelona1.jpg as the image to show
  • We will set the window size to slightly larger than this image to allow for the various toolbars
  • Give the window a name of newWindow and click OK
  • Preview this behavior in the browsers and click on the thumbnail
  • You should see another window popup with a larger version of the image in it
  • Modify the size of the new window to best accommodate the popup image

Adding a Larger Image Pop Up Window

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Thumbnail 1:19
    • Properties
    • Behaviors
  • Add Open Browser Menu 2:25
  • Open Browser Window 3:39
    • onClick
  • Set Window Width and Height 4:48
  • Firefox Preview 6:07
  • Resize Handles 7:36