Dreamweaver: Creating Rollover Images
Source Files: Mac |
PC
Final: Preview
This lesson will demonstrate how to create
simple rollovers in Dreamweaver 4. We created some source files
for you to follow along with if you don't want to take the time
right now to create some buttons.
Step 1: Define a new site for this example
- Define
a New Site for the source file folder you downloaded.
- Open
rollover.html.
If you need some assistance defining
sites, click
here.
Step 2: Inserting
the Rollover Buttons
- Click
in the first cell on the bottom of rollover.html.
- Insert
the first rollover image by going up to Insert>Interactive
Images>Rollover Image
or by clicking on the Insert
Rollover Image button in the Common
Category on the Objects
Panel.
Step 3: Naming the Rollovers
- You
can name your image in the Image
Name field or leave it at
the default.
- For
Original Image
click the Browse...
button to navigate to your images folder and select about_up.gif.
- For
Rollover Image
click the Browse...
button to navigate to your images folder and select about_over.gif.
- At this
point, you don't have to specify a URL. That can always be added
later since the point of this lesson is rollovers.
- Continue
for the other 2 buttons: Services
and Contact.
Step 4: Testing your Page
Click F12
to Preview In Browser. Mouse over your buttons to preview
the rollovers.
You may notice the pound sign (#)
in the Link Field and maybe wondering
how it got there? Well, Dreamweaver inserted it once you created
the rollovers. It's called a Null
Link and is needed to attach the JavaScript code. It is only
a placeholder and doesn't really link anywhere. When you're ready
to insert your own URL, just click in the field and type your new
URL over the poundsign.
|