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 CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

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

  • We are going to take a look at adding some 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
  • We will then set up a Swap Image Restore behavior so when the cursor moves back off the image, the original image shows once again
  • 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 & height of the images
    • Add an ID to the image on the page, call it swapping
    • Go to the Tag Inspector panel & select the behaviors button
    • Click the + sign & 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 & restore images on mouseout are checked
    • Save the page & 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
  • Behaviors in Dreamweaver 0:40
  • Insert an Image 2:03
  • Swapping an Image 3:40
    • Tag Inspector Panel
    • Behaviors Panel
    • Adding a Swap Image Behavior
  • Preview in Browser 8:58
  • Swap Behavior Code 9:31
  • Summary 10:38

Transcription: Adding a Swap Image Behavior

Welcome back to

We are going to take a look at a few interactive things that require Javascript in order to work within this chapter.0003

So, these are rather interactive things, meaning they will get your user involved in your website--if your user can do something and something will happen, or on the page it will happen automatically to make your web page a little more exciting to the user.0012

Nowadays, users expect a lot from a web page; and these are some of the extra features you can add to your pages to make it more exciting for them when they are viewing your pages.0029

We are going to work with something called behaviors in Dreamweaver.0040

What I am going to do is create a new page: so Ctrl or Command, N; and I am going to try and segregate this content from the rest of our website, so you have a nice, clean concept of what we have done.0045

I am going to save this into my Wanderlust Travel website; I am going to name it swap-images--there we go.0059

And that is exactly what we are going to do on this page; and I am going to have the title say Using Behaviors in Dreamweaver, because that is what Dreamweaver calls these particular features--behaviors.0071

That is specifically a Dreamweaver term; but what behaviors are, are Javascript features.0089

Now, we have taken a look at HTML so far; we have taken a look at CSS; and between those two, it gives our page the look we are looking for.0096

Now, what we want is to draw the user into the page by allowing things to happen on the web page; and that is where Javascript comes in.0106

There are a few different ways to add Javascript to your pages; we are going to use one that is specifically built into Dreamweaver.0116

So, the first thing I want to do is insert an image onto my page: I am going to have this title become my text on the page, simply by copying it, pasting it onto the page, and doing a Ctrl or Command, 1 to make it a Heading 1.0123

I'll hit Enter, and I am going to insert an image onto my page; so, I will use the Insert menu (I haven't used that much); I'll Insert Image, and the image I am going to use is in the Images folder here.0142

When I open that, I have the barcelona1 image; now, this is an image of a building in Barcelona, so I am going to say "Barcelona building."0159

I tend to keep these simple when I am in courses for Dreamweaver; but when this is your real website, just keep in mind that people with a screen reader will want some kind of a better description than that when they are having that alternate text read to them.0172

So, just keep in mind: you really want to give it a little more text than what I do--I just don't want you to waste time watching me type.0189

Here is my Barcelona image: now, I don't really need to have the Properties area open--what I am going to do takes place in a panel on the right-hand side--so I am going to close up my Properties so you can see the full image.0198

There is my Barcelona image; and this has a specific size.0214

Now, what I am going to do is swap out this image for another one when the user takes their mouse and puts it on the image.0220

So, it will be two images flipping back and forth, depending upon where the user's cursor is.0228

To do that, I am going to go up to the Tag Inspector panel.0236

And if you can't find this, it is is my CSS's way down at the bottom; it is not with that one, even though my CSS Styles looks like it's with it; it's down here; and it's the Tag Inspector.0242

Technically, what I want is this Behaviors panel; but I can get to it either by going to the Tag Inspector itself or going to the Behaviors panel directly.0259

I'll click on the Tag Inspector; now I click on Behaviors, and that is the panel that I want to be using.0270

Now, I need to make sure that I have the image selected, because swap-image only works if I am on an image to begin with.0278

So, I have selected the image; the behavior here--I am going to hit the + sign; what this is going to do is give me a list of everything I can do on this image.0287

So, you need to select it before you come to the Behaviors panel.0300

You can see, some of these are grayed out: that means that those are not things that I can do specifically on what I have selected.0304

What I am going to do is go down to the swap-image behavior; I'll go ahead and click on that.0314

Now notice, my image does not have a name: it is best to name your images, especially if you have multiple images on the page--an unnamed image...sometimes you can get some surprise results.0322

I am going to cancel out of this, open my Properties back up, and give this image a name.0336

The ID is going to be barcelona; remember, an ID is a CSS selector, and what an ID does is give this specific object a name; so, the name of this one will be barcelona.0343

I'll click off of that, just to set that; now, when I select the image, click the +, and go down to that same swap-image dialog box, you can see--now the browser knows exactly which image I am talking about.0359

We only have one on the page right now, but most pages have a lot more than that, and it can get very confusing, and you will end up with different results than you expect if you don't name them properly.0375

What Dreamweaver wants to know is, "OK, this image--when the user mouses over it (when they place their mouse on the image), what other image do you want to show?"0387

I am going to browse out: I have another image; that one was barcelona1--I am going to swap it out to barcelona2.0399

Now, when you do this, make sure that both of your images have that same sizing; so, within my image, you can see--this is 500x375; my barcelona2 is the same size.0408

Make sure you are using the same size image; otherwise, other content on your page, when the user mouses over it, can shift around, and it can change the layout of your page.0424

So, always set up your images to be the same size that you are going to use for this feature.0435

I want barcelona2; I will click OK; now, I want these images to preload--and these two are checked by default.0441

What Preload images means is: when the page loads, I want it to download this barcelona2 image along with the barcelona1 image.0451

Even though this one isn't showing at the time, I want it to be downloaded so that, as soon as the user hovers over the mouse, the image is ready to be shown.0464

Otherwise--if I don't preload--when the user puts their cursor on the image, that is when it would tell the browser to download, and I could have problems that way.0474

So, you want to preload your images.0485

Now, what this second one does is says, "OK, go back to the original image when the user moves their mouse off of it"; if I don't check this, I have to add a second behavior in order to do that.0488

I'm going to leave both of these checked; I'll click OK.0502

You can see, I now have two behaviors: on the left-hand side, that is known as an event handler--what that does is tell the browser what needs to happen in order for the right-hand side to occur.0506

So, on mouse-over (when the user puts their mouse over the image), I want it to swap an image; when the user takes their mouse off (which is referred to as an on-mouse-out event in Javascript), I want it to go back to the original image.0521

Let's save the page and take a look at it.0538

What I am going to do is put this into our very old Internet Explorer browser; let's take a look at if it works there, because if it works there, it will work everywhere.0541

And look at that...move this down a little bit, so you can see the complete image: and there we are.0552

Now, this is zoomed in; so let me go out to 100%--that looks a little nicer; and there is our swapped image.0560

You see how easy that was in Dreamweaver.0568

Now, what I want to show you is exactly what Dreamweaver did in Code View: Dreamweaver added some Javascript, and the way we know that is: if we go into Code View, you can see, there is this tag: script...javascript.0571

So, everything right there--there is the opening tag on line 6; Dreamweaver added all of that code to accomplish this, down through 29; so, lines 6 through 29 were added by Dreamweaver.0588

There is also some additional information added here on line 32; and there is also additional information added within our image tag itself, right here, telling the browser when to swap on the image.0603

There are actually three different pieces of code, not just two, that Dreamweaver adds to the page; and that is Javascript.0620

All we needed to do was two or three clicks with our mouse, and it works; and it even works in the very old browsers.0630

That is known as a behavior in Dreamweaver, specifically the swap-image behavior; and when we used this behavior and had that check box done, swap-image-restore was added also, which is why we have both of these.0639

Now, if I decided I no longer wanted this on the page, what I would do is simply highlight it and click the - .0656

I am going to leave this here--it's working just fine; go ahead and test it in all of your browsers, but I think you will find this is a pretty basic Javascript feature, so you should not have trouble between browsers.0664

The only way you might have it not work is, clearly, in Dreamweaver Design View, or if somebody has Javascript turned off in their browser--which most people don't understand how to do.0678

If Javascript is turned off, it is just going to show the first image, which is just fine--they won't get the interactivity.0691

As long as Javascript is turned on, in almost every browser (and specifically those I have tested here), this works perfectly.0699

That is the swap-image behavior in Dreamweaver; it allows the user to hover over an image and swap it out for another one.0709

Dreamweaver creates all of the Javascript for you, so you can add some interactivity to your web pages.0718

That is the swap-image behavior in Dreamweaver.0725