This is where you are:

---

 

Search the site

Return to Main Tutorial

Creating a site

1. Linking to an existing site

2. Starting a site from scratch

Creating a page using the Layout View

Importing images

Creating rollover buttons

Creating style sheets

Uploading to a server

 

 

Dreamweaver

Creating a rollover button

This is just one of the many ways of creating rollover buttons in Dreamweaver. I'm going to make a couple of assumptions for this lesson.

1. You have created a two-stage button in PhotoShop.
2. You have imported the regular state onto your page following the "Importing images" lesson and have named the image in the Properties panel.

---

1. Select the button image and click on the gear icon at the bottom right of your page (or Window>Behaviors).
2. Click and hold the "+" icon in the Behaviors panel. Select "Swap Image". If "Swap Image" is grayed out, make sure you have selected the image on the page.
3. The Swap Image window opens with the image you have select highlighted in a list of names. If you named your images it will be o easy to identify all of your artwork; if not, you probably see a list of "unnamed <image>".
   
   Where it says, "Set source to:" click on the folder to the right and browse to the OVER state of your button. This is where good naming helps. Typically I name my regular image home.gif and its rollover state home_f2.gif (because I work in Fireworks, it names files that way automatically).
   
   When you have found your image, click on it and MAKE SURE "Relative to" says "DOCUMENT" not "SITE".
4. Click Open. Accept the defaults in the check boxes. We do want the images to preload (prevents lag time when a user rolls over the image) and we want to restore image on MouseOut—we want our original image to appear when the mouse rolls off the button. Click Okay.
5. The Behaviors panel should now show (onMouseOut) and (onMouseOver). Dreamweaver just wrote the JavaScript code for you!
6. With the image still selected, look at the Properties panel. Next to "Link:" is "JavaScript:;". If you were just creating a rollover (no linking) you need to leave it or put "#" in its place. If you try to clear the window, the rollover code will break (Dreamweaver does warn you).
   
   To make the image link to another page or site, type the address in the Link window or click on the folder icon and find it in your site.

   Next, uploading to a server

 

© Copyright 2003 | Something Graphic | 20 November, 2003

Contact me:learn@CognitiveHorizons.com