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 Educator.com

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 Swap Image Behavior

  • We are going to take a look at adding interactivity to our web page by adding a swap image behavior
  • We will let Dreamweaver write the JavaScript code for us
  • When we hover over an image, the image will change to a different image and then return to the original image when we mouse off the image
  • Dreamweaver will create the code for this to happen which makes it very easy for us
    • Create a new page and save it as swap-image.html
    • Add an image to the page from the images folder, we want to use 2 images that are the same size for this behavior, the assets panel is a great place to double check the width and height of the images
    • Add an ID to the image on the page and call it swapping
    • Go to the Tag Inspector panel and select the behaviors button
    • Click the + sign and choose Swap Image
    • In the Set source to: choose another image, this will be the image that shows when you place your cursor on the image, be sure preload images and restore images onMouseOut are checked
    • Save the page and preview it in the browser hovering over the image
    • You will see the image change as you move over the image with your cursor

Adding a Swap Image Behavior

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
  • Image Swap 0:36
    • Behavior
    • Insert Image to Transition
    • Alt Text
  • Behaviors Panel 2:36
    • JavaScript
    • Swap Image
  • Adding Name to Image 3:17
    • Adding ID
  • Select Image Source 4:29
    • Preloading Image
    • Restore Images on Mouse Out