Student Page

Introduction

Task

Process

Evaluation

Conclusion

Resources

Teacher Page

Home

 

 


 

To complete this project, students should follow these steps:

Sort pictures/artworks with an eye for visual communication.
Decide color schemes and other deisgn elements for the gallery.
Follow steps in the tutorial below or use steps in other media books such as Adobe Photoshop in a classroom.

Creating and viewing image maps (ImageReady)

Creating image maps

Converting layer-based image maps to tool-based image maps

Viewing image maps

Selecting and modifying image maps (ImageReady)

Arranging image maps

Specifying image map options (ImageReady)

 

Creating and viewing image maps (ImageReady)


 Image maps enable you to link an area of an image to a URL. You can set up multiple linked areas--called image map areas--in an image, with links to text files; other images; audio, video, or multimedia files; other pages in the Web site; or other Web sites. You can also create rollover effects in image map areas.

The main difference between using image maps and using slices to create links is in how the source image is exported as a Web page. Using image maps keeps the exported image intact as a single file, while using slices causes the image to be exported as a separate file. Another difference between image maps and slices is that image maps enable you to link circular, polygonal, or rectangular areas in an image, while slices enable you to link only rectangular areas. If you need to link only rectangular areas, using slices may be preferable to using an image map.

Note: To avoid unexpected results, do not create image map areas in slices that contain URL links--either the image map links or the slice links may be ignored in some browsers.

Creating image maps


 You can create image map areas using an image map tool or a layer.

Tool-based image map areas Are created using an image map tool--you drag in the image to define the image map area. You can view and set options for tool-based image maps in the Image Map palette.

Layer-based image map areas Are created from a layer--the layer's content defines the shape of the image map area. If you edit the layer's content, the image map area automatically adjusts to encompass the new pixels. You can view and set options for layer-based image map areas in the Image Map palette, however you cannot use the Duplicate or Align commands. To access these commands, or to move or resize the image map area by dragging, you can convert a layer-based image map area to a tool-based image map area.

If you plan to add a rollover effect to an image map area, it is often preferable to use a layer-based image map area rather than a tool-based image map area. For example, if you create a rollover button that displays a glow effect in the Over state, a layer-based image map area will automatically adjust to encompass the pixels that are produced by the glow.

Important: If you overlap image map areas, the topmost area is active.

To create an image map area using an image map tool:

1 Select the rectangle image map tool ( ), the circle image map tool ( ), or the polygon image map tool ( ) in the toolbox.

2 For the rectangle or circle image map tool, select Fixed Size to specify set values for the image map area's dimensions. Enter pixel values in whole numbers.

3 Do one of the following to define the image map area:

·  With the rectangle or circle image map tool, drag over the area you want to define. Shift-drag to constrain the area to a square. Alt-drag (Windows) or Option-drag (Mac OS) to drag an image map area from its center.

·  With the polygon image map tool, click in the image to set the starting point. Position the pointer where you want the first straight segment to end, and click. Continue clicking to set endpoints for subsequent segments. Hold down Shift to constrain the segment to 45° increments. To close the border, double-click, or position the pointer over the starting point (a closed circle appears next to the pointer) and click.

 To create an image map area from a layer:

1 In the Layers palette, choose a layer from which to create an image map area. (To use multiple layers in one image map area, first merge the layers.)

2 Choose Layer > New Layer Based Image Map Area.

Converting layer-based image maps to tool-based image maps


 Because a layer-based image map area is tied to the pixel content of a layer, the only way to move, resize, or align it is to edit the layer. You can convert a layer-based image map area to a tool-based image map area to unlink it from the layer.

To convert a layer-based image map area to a tool-based image map area:

1 Select a layer-based image map area using the image map select tool ( ). (See Selecting image maps).

2 Choose Promote Layer Based Image Map Area from the Image Map palette menu. If the layer contains multiple, non-overlapping areas of pixel content, multiple tool-based image map areas are produced.

Viewing image maps


 When you select the image map select tool, image map areas show automatically. You can also show or hide image map areas using the Image Map Visibility button.

Image map preferences determine how image map areas appear in the document window. You can set preferences for image map lines, line color, and color adjustments.

To show or hide image map areas:

Do one of the following:

·  Click the Image Map Visibility button ( ) in the toolbox.

·  Choose View > Show > Image Maps.

·  Choose View > Show Extras. This command also shows or hides selection edges, slices, text bounds, text baseline, and text selections. (See Working with Extras.)

 To set image map display preferences:

1 Choose Edit > Preferences > Image Maps.

2 To change the color of image map lines, choose a color from the Line Color pop-up menu. Changing the color of image map lines also changes the line color of selected image map areas to a contrasting color.

3 To change the strength of image map color adjustments, enter a value, or choose a value from the Image Map Overlay pop-up slider. The value determines the extent of color adjustments that dim the brightness and contrast of unselected image map areas.

4 To display image map lines only and deselect color adjustment display, select Show Lines Only.

5 To show a bounding box for circular image map areas, select Show Bounding Box.

Selecting and modifying image maps (ImageReady)


 You can move, arrange, align, and duplicate tool-based image map areas using the Image Map palette. There are fewer options for modifying layer-based image map areas because they are tied to the pixel content of the associated layer; however, you can select, arrange, and delete layer-based image map areas as you do tool-based image map areas.


Designing Web Pages > Selecting and modifying image maps (ImageReady)

Related subtopics:

 

Arranging image maps


 When image map areas overlap, the last image map area you create is the top image map area in the stacking order. You can specify which image map area is on the top and bottom of the stack and move image map areas up or down in the stacking order.

To change the stacking order of image map areas:

1 Select one or more image map areas you want to arrange. You can select a combination of tool-based image map areas and layer-based image map areas.

2 Do one of the following:

·  With the image map select tool active, click a stacking order option in the options bar: Bring to Front ( ), Bring Forward ( ), Send Backward( ), Send to Back ( ).

·  Choose a stacking order command from the Image Map palette menu.

 

Specifying image map options (ImageReady)


 You can specify a name, a URL, a target frame, and Alt text for an image map area in the Image Map palette.

To change the name of an image map area:

1 Select an image map area.

2 In the Image Map palette, enter a new name in the Name text box.

To specify link options for an image map area:

1 Select an image map area.

2 In the Image Map palette, enter a URL for the link, or choose a previously created URL from the URL pop-up menu. You can enter a relative URL or a full URL. If you enter a full URL, be sure to include http:// (for example, enter http://www.adobe.com, not www.adobe.com). For more information on using relative URLs and full URLs, see an HTML reference (either printed or on the Web).

3 In the Image Map palette, enter the name of a target frame in the Target text box, or choose an option from the pop-up menu. A frame name must match a frame previously defined in the HTML file for the document. When a user clicks the link, the specified file displays in the new frame:

·  _blank to display the linked file in a new window, leaving the original browser window open.

·  _self to display the linked file in the same frame as the original file.

·  _parent to display the linked file in its own original parent frameset. Use this option if the HTML document contains frames and the current frame is a child. The linked file displays in the current parent frame.

·  _top to replace the entire browser window with the linked file, removing all current frames.

 Note: For more information on frames, see an HTML reference (either printed or on the Web).

4 In the Image Map palette, enter text for an Alt tag in the Alt text box. The Alt text appears in place of the image map area in nongraphical browsers. In most browsers, it also appears if the user positions the mouse over the image map area.

 These pages were made through TeacherTECH, the teacher professional development component of GirlTECH, which is sponsored by the Center for Excellence and Equity
in Education (CEEE) with support from the National Science Foundation through
EPIC
.


Copyright © June 2005 by Mamade Sacko

TOP