macromedia USING IMAGE MAPS AND SLICING When you finish this lesson, you will understand: image maps disjointed rollovers and you will have learned:

Transcription

1 LESSON 9: USING IMAGE MAPS AND SLICING OBJECTIVES When you finish this lesson, you will understand: image maps disjointed rollovers and you will have learned: how to create image maps and hotspots how to slice an image into smaller pieces how to use the URL panel and the URL Library By definition, all graphics are rectangular. If you make a graphic a link, then the shape of the link is rectangular as well. You can make a portion of a graphic transparent, or make its background color the same color as the background color of the Web page, giving the illusion of a different shape, but you will still have a rectangle. If you want to make a link area a shape other than a rectangle, or if you want to create several links on one image, then you have to use an image map. For example, suppose you have a map of the United States, and you want a link for each state. Most of the states have irregular shapes, and none are neatly ordered side by side. You need to distinguish the different shapes of each state and then assign a link. This is what an image map does. The link areas on an image map are referred to as hotspots. A hotspot area on an image map can be one of three shapes: a rectangle, a circle, or a polygon. The next exercise shows you how to create the hotspots on an image and then assign links to the hotspots. FIREWORKS 3 CURRICULUM 93

2 CREATING IMAGE MAPS Although it is easy to create image maps in an HTML editor such as Dreamweaver, Fireworks can accomplish the same task for you. The resulting HTML can then be pasted into your Web page To create an image map: 1. Open the Imagemap.png file located in the Imagemaps folder. Figure 9-1 shows the image you ll use for this example. Figure 9-1 Image for image maps exercise. 2. Select the Rectangle Hotspot tool from the toolbox (see Figure 9-2) and draw a rectangle around each of the words you will use as navigation links: home and about us. A translucent area appears at the Hotspots you ve created. Hotspot tools: Rectangle / Circle / Polygon Figure 9-2 Slice and Hotspot tools in the toolbox. 3. If you want to move a hotspot, switch to the Pointer tool and drag the object to the new location. Continue to draw hotspots on the page until you have one for each text item (planting, growing, harvesting, and roasting.) 4. With the Circle Hotspot tool, draw a circle around the image in the circle with the text of gifts. 5. Open the Object panel by choosing Window > Object. FIREWORKS 3 CURRICULUM 94

3 6. With the Pointer tool, select each hotspot and type a URL in the Object panel (see Figure 9-3). Type home.htm for home, gifts.htm for gifts, and about.htm for about us. Figure 9-3 Object panel with hotspot selected. 7. After you have assigned URLs to all of the hotspots, you are ready to export the image map. Choose Window > Optimize and choose the file format, palette, and any other needed options. 8. Choose File > Export. 9. In the Export dialog box, type the file name if you want a different name from the one Fireworks assigns. Make sure the Slicing option is set to None. Pick the HTML format you want from the Style pop-up menu (see Figure 9-4). Figure 9-4 Export dialog box. For Slicing, choose None, and the HTML output style you want. 10. Click the Setup button to set properties for the output of the image map files. 11. In the Map Type pop-up menu in the HTML Properties dialog box (see Figure 9-5), choose Client-side, Server-side, or both. Note: A client-side image map has all the information for defining the area of the hotspot within the HTML code. A server-side image map requires a CGI (Common Gateway Interface) program running on the server. Server-side image maps add an extra load to the Web server. Client-side image maps are processed by each user s computer. FIREWORKS 3 CURRICULUM 95

4 12. For Background URL, enter the file to go to if the user clicks outside of the image map area. Alternate Image Description adds the ALT tag to the HTML. Note: The ALT tag is not supported in image maps on all browsers. Figure 9-5 HTML Properties dialog box for setting image map properties. 13. Click OK and then click Export (Macintosh) or Save (Windows) to save the HTML file and the image map graphic. 14. Open the HTML file and test it in your browser. FIREWORKS 3 CURRICULUM 96

5 CREATING DISJOINTED ROLLOVERS At the beginning of this lesson, you learned how to create a rollover so that one image is swapped for another image when the user moves over it. A disjointed rollover is an image that changes when the user moves the mouse over a completely different image. To see this, you ll use a file that has been created for you. It already contains slices and rollovers for the navigation buttons. You will add images that appear when the user rolls over each of the buttons. Just like traditional rollovers, disjointed rollovers use frames to store the images. For this example, you will add the frames and import the rollover images. To create a disjointed rollover: 1. Open the Gifts.png file in the Rollovers folder. The page contains slices and rollovers for the buttons (see Figure 9-6). Figure 9-6 Image file to use in disjointed rollover exercise. 2. The file contains several layers. The background layer is shared across frames. Remember that objects on shared layers appear on each frame, which you don t want for the rollovers. Select the products layer as the location for placing your images. The buttons that need the rollovers are labeled: blend, foods, tools, and wear. The square with the text Gift Catalog is where the disjointed rollovers will appear. 3. Add three more frames using the New Frame icon in the Frames panel. (Two frames already exist in this file.) Frames 2, 3,4, and 5 will be used to place the images. 4. Select frame 2. Import the Blends.png file from the Products folder. (Products is located in the Rollovers folder.) 5. Place the image in the gifts square to the right of the buttons in frame Select frame 3. Import the Mocha_bars.png file from the Products folder and place it in the same location as before. Repeat for frame 4 with the Mug.png file and for frame 5 with the Cap.png file. FIREWORKS 3 CURRICULUM 97

6 USING THE BEHAVIORS PANEL Once the images are placed in the frames, you are ready to make the buttons work. To do this, you need to add some JavaScript. Don t panic Fireworks does all the hard work for you. Fireworks uses behaviors to add all the JavaScript code to your pages. A behavior is simply a set of options you can add to your buttons. You just have to define the images to use, and Fireworks does the rest. Behaviors in Fireworks work the same as they do in Dreamweaver. Behaviors consist of two parts: an event and an action. The event is a user activity: for example, the user may move the mouse over a button. The action is the activity that the event triggers. Behaviors in Fireworks can be assigned only to Web objects such as slices and hotspots. To add behaviors to Web objects: 1. Select the Web object for the Blends button. (The green translucent slice should be visible. If it is not, click the Show Hotspots and Slices icon on the toolbar.) 2. Choose Window > Behaviors to access the Behaviors panel. You should see the Simple Rollover behavior that has already been attached to the button. 3. Click the plus sign in the panel to add a new behavior. From the drop-down list (see Figure 9-7) choose Swap Image. This behavior displays an alternative image to display when the user rolls over the button. Figure 9-7 Behaviors panel with drop-down list. FIREWORKS 3 CURRICULUM 98

7 4. In the Swap Image dialog box that appears (see Figure 9-8), you ll see a list on the left and a graphical representation of all the Web objects on the right. If you have named your slices, it is easy to pick the slice from the list. In this example, the slice is named Catalog. Click the name to select it. Figure 9-8 Swap Image dialog box. 5. In the Show the Swapped Image From area, choose Frame No. and pick frame 2. Click OK. 6. Repeat the process for the remaining buttons, using Frame 3 for the next button and so on. 7. Save the file and click the Preview tab to test your buttons. The Preview tab works great for viewing your pages before actually exporting them. You can also preview your pages using a browser. To preview in browser within Fireworks: 1. Choose File > Preview in Browser > Set Primary Browser to choose the primary browser application. You can access this command by using the shortcut F Choose File > Preview in Browser > Set Secondary Browser to choose the secondary browser application. You can also access this command by using the shortcut Shift-F12. FIREWORKS 3 CURRICULUM 99

8 STUDENT NOTES FIREWORKS 3 CURRICULUM 100

9 CREDITS PATTI SCHULZE is the founder and president of Digital Training & Designs ( an authorized training center for Macromedia and Adobe located in Dallas, Texas. She teaches HTML, Dreamweaver, Fireworks, and FreeHand, as well as PageMaker and QuarkXPress. Along with her training duties, she also has created many Web sites: from recommending the hardware, installing the software, and developing the databases and e-commerce to designing the graphics and coding the HTML Outside of work, Patti s passion is cycling, and she has completed more than 15 centuries (100-mile rides) in the last three years. JUDY ZIAJKA (ziajka@aol.com) is a Berkeley-based editor and project developer specializing in technical materials. She edited the Macromedia Authorized and Macromedia Interactive series as well as course guides for numerous Macromedia products. Before setting up her own editorial business 15 years ago, she was editor-in-chief of Osborne/McGraw-Hill, where she helped develop books on WordStar and VisiCalc and the Apple II and kept a secret Macintosh locked in a conference room before the rest of the world knew that it would be the Next Big Thing. She also served as managing editor of Mayfield Publishing and as an editor in various capacities with Macmillan. She began her career at the American Journal of Physics at MIT. PHOTOS in the Lessons folder are from the PhotoDisc catalog. For more information on PhotoDisc, go to Copyright 1999 PhotoDisc, Inc. FIREWORKS 3 CURRICULUM 101

10 COPYRIGHT INFORMATION Copyright by Macromedia, Inc. All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, or otherwise, outside of the license agreement accompanying these materials, without the prior written permission of Macromedia, Inc. NOTICE OF LIABILITY The information in these training materials is distributed on an "AS IS" basis, without warranty. While every precaution has been taken in the preparation of these materials, neither Macromedia, Inc. nor its licensors shall have any liability to any person or entity with respect to liability, loss, or damage caused or alleged to be caused directly or indirectly by the instructions contained in these materials or by the computer software and hardware products described herein. TRADEMARKS Products, services, company names, logos, designs, titles, words or phrases may be protected under law as the trademarks, service marks, or trade names of Macromedia, Inc. or other entities. Such trademarks, service marks and trade names may be registered in the United States and internationally. The following is a list of trademarks and service marks of Macromedia, Inc. that may also be registered in the United States and/or internationally: Macromedia, the Macromedia logo, ARIA, Authorware, CourseBuilder, Director, Dreamweaver, Drumbeat, Fireworks, Flash, Fontographer, FreeHand, Generator, LikeMinds, Lingo, Shockwave, and Xtra are trademarks or registered trademarks of Macromedia, Inc. Other products, services, company names, logos, designs, titles, words, or phrases within these materials may be trademarks of their respective owners. FIREWORKS 3 CURRICULUM 102