Web Page Design

Rollovers

Part 1 - Creating a Simple Rollover

You will start by creating a simple rollover. It involves two pieces of artwork.
The first appears on the screen initially, and the second appears when the
mouse “rolls over” it.

1. Open your Dreamweaver and create a new site called

YourNameRollover.
2. Create a new blank HTML page and then save it as simple_roll.html.
3. Choose Insert>Image Object>Rollover
Image.
a. For the original image click browse
to select symbol_off.jpg located in
the

MTComputers\Scook\WebPageDesignImages folder
b. For the rollover image, choose symbol_over.jpg
c. Click OK
4. You may notice the “#” symbol in the link box of the property inspector.
Dreamweaver MX inserted this symbol in order to create a link even
though you didn’t specify one. It doesn’t link to anything, it is just a
placeholder so you can still click and see the rollover.
5. In the property inspector, click the browse for file (small folder) icon to
the right of the link field and brose to select the brush.html located in
MTComputers \ Scook \ WebPageDesignImages \ HTML File.
6. Press F12 to preview the rollover.
7. Click the symbol and voila, brush.html will appear. Important: You may
see red “x” symbols where some of the pictures are. That is okay, you do
not have the images that go with those files.

Part 2 – Animated Rollovers!

This exercise is similar to Part 1, only instead of two images that do not
move, the rollover image in an animated GIF. You will be putting the rollover
graphics inside of a table to ensure that they don’t move around once they
are in place.
1. Open the index.html folder from
MTComputers/Scook/WebPageDesignImages/HTML File and save it to your
Rollovers root directory.
 Web Page Design
Rollovers

2. If you get grey boxes where the symbols are, reset the path to the images
file – you can find them in MTComputers/Scook/Images file.
a. The one in the middle is symbol_over.
b. The top left is logo.
c. The one to the right of logo is tip.
3. Notice in the index.html the empty table below the symbol_rollover. This
is where you are going to put the rollovers for each button.
a. Click inside Cell A (the first one on the left) and click Insert>Image
Object>Rollover Image.
b. For the original image click browse to select shears.gif located in
the MTComputers\Scook\WebPageDesignImages folder
c. For the rollover image, choose shears_ani.gif
d. Click OK
e. Important: You will notice that the table columns have changed
size. Don’t worry about that, it will be fixed shortly.
4. Place your cursor to the right of the shears.gif that you just inserter. Press
tab to go to the next cell.
a. Follow steps 3b through 3d above, however you will use the pot.gif
and pot_ani.gif images for this cell.
b. Finally, repeat the steps above for care.gif and care_ani.gif for the
third cell in the table.
5. SAVE YOUR FILE.
6. Press F12 to preview your file in a browser.

Part 3 – Creating Pointing Rollovers

You will now create pointer rollovers. These reuse one piece of artwork. This
type of rollover involves making a table to hold all of the artwork in place.
We will also use the behaviors feature during this part of the assignment.

1. Open the pointer.html folder from

MTComputers/Scook/WebPageDesignImages/HTML Files and save it to
your Rollovers root directory.
2. You will see that there is a table already inserted on the page. You will
use the following guide to the specific cells for the rest of the exercise.
CELL A CELL H
CELL B CELL I
CELL C CELL J
CELL D CELL K
CELL E CELL L
CELL F CELL M
CELL G CELL N

3. Click inside Cell I and choose Insert>Image.

a. Select blank_p.gif from the images folder, then click open.
 Web Page Design
Rollovers

b. The reason for this is that you are going to put this image in every
location that the pointer will appear. You are doing this because
rollovers require two images, the original and the rollover. In this case,
the original looks like nothing because it is a transparent GIF, which
lets the background show through.
c. Repeat 2a above for Cells J, K, L and M.
4. SAVE YOUR FILE!
 Web Page Design
Rollovers

5. After you have completed steps 3a through 3c above, click inside Cell I.
a. In the property inspector, give it the name blank1.
b. You will name Cells J, K, L, and M, blank2, blank3, blank4 and
blank5, respectively.
c.

6. Click inside Cell A and choose Insert>Image.

a. Select top_nav.jpg from the images folder, then click open.
b. With this image still selected, in your Property Inspector, enter the
name top like you did blank1, etc.
7. Repeat for the following cells as shown below -

Cell B art.jpg art

Cell C how.jpg how
Cell D tools.jpg tools
Cell E photos.jpg photos
Cell F contact.jpg contact
Cell G bottom_nav.jpg bottom
Your screen should look like this:
8. SAVE YOUR FILE!
 Web Page Design
Rollovers

9. Now you will be setting the rollovers. See the screen shot below
for assistance in finding the correct area of the behaviors panel.
a. Click art. jpg to select it.
1. Open the behaviors panel by clicking on Window>Behaviors.
Your behaviors panel will be on the right side of your screen
with the rest of the panels where your files are showing.
2. Click the plus sign (+) above the events column and select swap
image from the pop-up menu.
3. In the swap image dialog box that opens, make sure the blank1
image name is highlighted.
4. Click browse and select point_symbol.gif locate in the images
folder.
5. Click open.
6. In the swap image dialog box, click ok.
 Web Page Design
Rollovers

b. Click how.jpg to select it.

1. Open the behaviors panel by clicking on Window>Behaviors.
Your behaviors panel will be on the right side of your screen
with the rest of the panels where your files are showing.
2. Click the plus sign (+) above the events column and select swap
image from the pop-up menu.
3. In the swap image dialog box that opens, make sure the blank2
image name is highlighted.
4. Click browse and select point_symbol.gif locate in the images
folder.
5. Click open.
6. In the swap image dialog box, click ok.
c. Repeat Steps a and b three more times as follows:
1. For tools.jpg selecting image “blank3”.
2. For photos.jpg selecting image “blank4”.
3. For contact.jpg selecting image “blank5”.
10.SAVE YOUR FILE and PREVIEW IN YOUR BROWSER.

Part 4 – Creating Multiple-Event Rollovers

A multiple-event rollover uses more than two pieces of artwork in the Swap
Image behavior. In this part of the assignment, three different pieces of
artwork will change for every rollover.
1. Open the multiple.html folder from
MTComputers/Scook/WebPageDesignImages/HTML Files and save it to
your Rollovers root directory.
2. You will see that there is a table already inserted on the page. You will
use the following guide to the specific cells for the rest of the exercise.
CELL C C
D ELL ELL
E F
CELL C C
A ELL ELL
B C

3. Click inside Cell A and choose Insert>Image.

a. Select tools_but.gif from the images folder, then click open.
b. With this image still selected, in your Property Inspector, enter the
name tools.
4. Click inside Cell B and choose Insert>Image.
c. Select main_but.gif from the images folder, then click open.
d. With this image still selected, in your Property Inspector, enter the
name maintenance.
5. Click inside Cell C and choose Insert>Image.
e. Select art_but.gif from the images folder, then click open.
 Web Page Design
Rollovers

f. With this image still selected, in your Property Inspector, enter the
name art.
6. Click inside Cell D and choose Insert>Image.
g. Select blank1.gif from the images folder, then click open.
h. With this image still selected, in your Property Inspector, enter the
name blank1.
7. Click inside Cell E and choose Insert>Image.
i. Select swapper.gif from the images folder, then click open.
j. With this image still selected, in your Property Inspector, enter the
name swapper.
8. Click inside Cell F and choose Insert>Image.
k. Select blank2.gif from the images folder, then click open.
l. With this image still selected, in your Property Inspector, enter the
name blank2.
9. SAVE YOUR FILE
10. Select the image in CELL A (row 2, column 1).
a. Go back to your behaviors panel and click the plus sign and then
select swap image.
b. In the swap image dialog box, notice that tools is select in the
images list.
c. Click browse to set source to tools_but_F2.gif.
d. Click OK to copy the image to your rollover images file.
e. Select swapper from the same images list.
f. Click browse again to set source to swap_shears.jpg and then click
OPEN.
g. CLICK OK!
11. Select the image in CELL B
a. Go back to your behaviors panel and click the plus sign and then
select swap image.
b. In the swap image dialog box, notice that maintenance is select in
the images list.
c. Click browse to set source to maint_but_F2.gif.
d. Click OK to copy the image to your rollover images file.
e. Select the same swapper as you did in 10 above from the images
list.
f. Click browse again to set source to swap_maint.jpg and then click
OPEN.
g. CLICK OK!
12. Select the image in CELL C
a. Go back to your behaviors panel and click the plus sign and then
select swap image.
b. In the swap image dialog box, notice that art is select in the images
list.
c. Click browse to set source to art_but_F2.gif.
d. Click OK to copy the image to your rollover images file.
 Web Page Design
Rollovers

e. Select the same swapper as you did in 10 above from the images
list.
f. Click browse again to set source to swap_tree.jpg and then click
OPEN.
g. CLICK OK!

Part 5 – Creating Flash Buttons

Dreamweaver MX creates Flash Buttons. They have very similar
characteristics to the rollovers that you just created. However, instead of
using a premade graphic, they are made within Dreamweaver MX. Another
difference is that the images in Dreamweaver MX in the SWF file format
instead of JPG or GIF. It lets you create Flash
rollover buttons from a predefined set of
styles, without ever leaving
Dreamweaver MX.
1. Open the flashbuttons.html
folder from MTComputers/ Scook/
WebPageDesignImages/ HTML Files and
save it to your Rollovers root
directory.
2. Click inside the first cell of the top
table.
3. Choose Insert>Media>Flash Button
4. Under th4e style option, select the beveled rect-green. This changes
the sample area at the top.
a. Move your mouse over the
sample area to preview the
rollover effect of the style.
b. For the button text option, type
How to Bonsai.
c. Make sure the font option is set
to Verdana and the size
option is set to 12.
d. Click the bg Color box and
choose #FFFFCC.
e. Save as how.swf.
f. Click OK
5. SAVE YOUR FILE
6. Click on the next cell to the right.
7. Following Steps 4a through 4f above create a flash button for: Tools &
Supplies, The Art of Bonsai, and Photo Gallery. Don’t forget to
save each file and give it a unique name.
8. You will now get rid of the large gaps in between the flash buttons.
a. Select the entire top table where you just inserted the flash buttons.
Choose Modify>Table>Select Table
 Web Page Design
Rollovers

b. In the property inspector, set the table width (W) to 400.

c. Adjust the cellpad to 5
9. SAVE YOUR FILE

Part 6 – Inserting a Navigation Bar Rollover

The last type of rollover you are going to practice in this assignment is the
navigation bar rollover. A navigation bar-style rollover allows each button
to display four states – up, over, down and over while down. Instead of
working with two images for each rollover, this type of rollover requires that
you work with four – one for each separate state. You will use the
Dreamweaver MX Insert Navigation Bar feature to do this.
1. Open the navbar.html folder from MTComputers/ Scook/
WebPageDesignImages/ HTML Files and save it to your Rollovers root
directory.
2. Choose Insert>Image Objects>Navigation Bar.
a. Enter Element Name: tools. This will assign a name to the first
rollover image in this navigation bar.
b. Click browse next to the up image field.
i. Browse to the images folder and select tools_up.jpg.
ii. Click open to select this image.
c. Click browse next to the over image field.
i. Browse to the images folder and select tools_over.jpg.
ii. Click open to select this image.
d. Click browse next to the down image field.
i. Browse to the images folder and select tools_down.jpg.
ii. Click open to select this image.
e. Click browse next to the over while down image field.
i. Browse to the images folder and select tools_overdown.jpg.
ii. Click open to select this image.
f. DO NOT CLICK OK because you are going to add to this bar
before you are done.
3. Click on the plus (+) sign on the navigation bar dialog box.
4. Also make sure that you have the insert horizontally box checked at the
bottom as we want these to go across the top of your screen.
5. Follow Steps 2a through 2e above to add three more new elements to the
navigation bar using the chart below.
Element State File
art Up art_up.jpg
Over art_over.jpg
Down art_down.jpg
Over While Down art_overdown.jpg

how Up how_up.jpg
Over how_over.jpg
 Web Page Design
Rollovers

Down how_down.jpg
Over While Down how_overdown.jpg

photos Up photos_up.jpg
Over photos_over.jpg
Down photos_down.jpg
Over While Down photos_overdown.jpg
6. SAVE YOUR FILE!!
7. Check each of your HTML files to make sure that they work.
8. Drag & Drop your file.