Topics for Today

1
Topics for Today

• Simple Rollovers
• Multiple-event Rollovers
• Forms

2
Rollovers

• are great for adding visual cues to tell your
  audience that an image has special meaning or is
  a link
• are useful when you have limited space. You could
  roll over an image and a new image appears with
  more information.

3
Rollovers

• require a minimum of 2 graphics (more than 2 for
  multiple-event rollovers)
• an off state graphic
• and an on state graphic
• these graphics must have the same height and
  width
• are written in JavaScript (not really related to
  the Java programming language)

4
A Simple Rollover

• requires 2 graphics of the same dimensions
• is added using the Rollover icon in DreamWeavers
  insert panel
• browse to the original image (that is the
  off-state image)
• browse to the rollover image (that is the
  on-state image)
• check Preload Rollover Image (this loads the
  on-state image when the page loads)

5
Rollovers That Effect Other Images

• DreamWeaver can add a behavior to an image that
  causes a different image to do a swap

image B that swaps with its on version
image A with the rollover behavior
6
Adding the Behavior

• select image A
• click the in the Behaviors panel
• select the Swap Images behavior
• choose the image that you want to swap out (image
  B)
• browse to the image that you want to swap in (the
  one that replaces image B)
• usually you will check the boxes Preload Images
  and Restore Images onMouseOut

7

• Preview all these effects in a browser. They do
  not show up in DreamWeaver.

8
Multiple Event Rollover

• not much harder than adding a simple rollover
  behavior to an image
• you do need several images though, one on and
  one off for each image you wish to change

9
Adding the Behavior

• select an image to add the behavior to
• click the in the Behaviors panel
• select the Swap Images behavior
• choose an image that you want to swap out (it may
  be the same image you are adding the behavior to
  or not)
• browse to the image that you want to swap in

10

• usually you will check the boxes Preload Images
  and Restore Images onMouseOut
• dont click OK yet
• select another image from the list that you want
  to swap out
• browse to its replacement image
• repeat the last 2 steps until you have specified
  all the images you want to be affected by your
  mouseOver
• click OK and preview in browser

11
Forms

• are very important for collecting information
  from your sites viewers
• we will concentrate on creating the Form objects
  and not on the code required to collect and work
  with the data

12
The Most Basic Form Element

• is Form!
• all your other form objects must be inside a Form
  element to work
• it is the first icon on the Insert Form panel

13
Other Form Objects

• your text lists 13 other form objects that you
  can insert through DreamWeaver
• we will use many of them in lab next week
• your form will look best if you create a table
  and insert your form objects inside the table
  cells. Otherwise, the alignment is really ugly!
• demo time