CBT Cafe Logo  

CBT Cafe > Dreamweaver > Menus & Rollovers

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

  1. Define a New Site for the source file folder you downloaded.
  2. Open rollover.html.

If you need some assistance defining sites, click here.

Step 2: Inserting the Rollover Buttons

  1. Click in the first cell on the bottom of rollover.html.
  2. 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.
Inserting the Rollover Buttons

 

Step 3: Naming the Rollovers

  1. You can name your image in the Image Name field or leave it at the default.
  2. For Original Image click the Browse... button to navigate to your images folder and select about_up.gif.
  3. For Rollover Image click the Browse... button to navigate to your images folder and select about_over.gif.
  4. 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.
  5. Continue for the other 2 buttons: Services and Contact.
Naming the Rollovers

 

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.

Testing your Page

 

transSpacer
 

Home | Dreamweaver | Fireworks | Flash | Photoshop | Elements | PowerPoint| Ebay | QuickTime Pro | Flash 5 CD | Fireworks MX CD | QuickTime Support | Contact

Copyright © 1999-2011 CBT Cafe, All rights reserved

Flash®, Fireworks™, and Dreamweaver® are registered trademarks of Macromedia, Inc. in the United States and/or other countries
Photoshop®, Photoshop Elements® and Illustrator® are registered trademarks of Adobe Systems, Inc.
QuickTime® is a registered trademark of Apple Computer, Inc.
Ebay® is a registered trademark

CBT Cafe | Multimedia Learning | Interactive Graphics