Now two large transparent images need to be placed into the other cells of the table so we can swap out those images with something else.

So I'll insert an image into the middle cell called image1.gif. Now the reason this image is 600 X 380 pixels is because all the other images that will be taking its place are of this size. And in this case we want to center this image so it looks good on our page.

And now we add a different tranparent gif to the bottom cell called image2.gif and center it. This one is 600 X 250 pixels as this is the size of our text files.

The next important step we need to do is name each image. So, go to the Properties inpsector and give each a brief but useful name. This includes not only the buttons but the blank images. In this case I call the images "blank1" and "blank2". I can't stress enough how important this particular step is...

Okay, so now we have our page looking like we'd like the user to see it when they come to it. All we have to do now is add the javascript behaviors. We'll use the Behaviors Panel for this.

First click on the "Elan" button. Then go to the Behaviors Panel and choose the Swap Image Behavior.

Now notice when you do this that all of the names we've given our images appear in the list. That's very helpful in a situation where you need to be able to identify multiple images like we're doing.

The image highlighted in the dialog box is the one selected on the page. This dialog box is asking, "What do you want this to turn into?"

Next Page