Step 5
Create a new layer and label it - Buttons. Double click the layer and make sure - Share Across Frames - is checked. Now drag and position 3 buttons anywhere on the map. Doing this automatically slices up the image. If you move the buttons the slicing will change. Finally create a final slice (using the slice tool) encompassing the white area on the right.

Image sliced with buttons and space for 'apartment info.'

Step 6
Now that your buttons are positioned and set you need to add the fake apartment images to the mix. Create new layers for each one and name them appropriately. Now click the 'Frames Tab' and add a frame for each apartment image you plan on adding.

Create a layer for each apartment	Create 4 frames

Step 7
Now you want to convert your 'apartment info' images into 'graphic symbols.' In the Library palette click the small arrow button (next to the ? symbol) at the right top and select - New Symbol... Select 'Graphic' and give your symbol a name - i.e. Macromedia Apt. Click OK. Now right click in the new window and import the correct image. In my case - macromedia_apt.jpg Close the window. Repeat this procedure for the other two images.

Step 8
Select the 'Macromedia Apt' layer. Then go the 'Frames' palette and select 'Frame 2.' Now drag the 'Macromedia Apt' symbol from the 'Library' palette and position it over the white area on the right. Use the arrow keys to position it.

Step 9
Now all you have to do is add a 'behavior' to the specific button on the map. First select the 'Buttons' layer. Then click the 'Behaviors Tab.' Now the button symbol already has a rollover effect, it changes from red to blue when you do a mouse over. Now we want to add another behavior so when you do a mouse over an apartment image appears. Click the 'Plus' button and select - Swap Image.

Add Behaviors to buttons

This brings up your 'Swap Image' window. Select the large slice to the right. This is where your 'apartment info' images resides in their various frames. Make sure 'Frame 2' is chosen. Click OK.

Swap Image window

Now repeat this procedure for the other button/images. The next apartment image will use Frame 3, etc.

Step 10
With the job done you can now preview it by clicking the 'Preview' Tab.

Step 11
You should now Export the file so it can be imported into Dreamweaver. Click - Export - and make certain to select - 'Use Slice Objects.' Save this to your 'maps' or 'image' folder. I named my file - apartments.

Step 12
Now Start Dreamweaver and open - apartments.htm. Click F12 and preview it in your browser. This is not as intuitive as creating simple rollover effects as in Dreamweaver but it does have greater flexibility.

Click here to see the final result - apartment.htm

(1) (2)