PhotoShop Image Maps Midwestern States Info Pages

The Original.gif File A crude outline of the Midwestern States

The Colorized GIF File  Open Photoshop with the image.  Use the Magic wand to select a state.  Select a color.  Use the Paint Bucket to place color in state.

PhotoShop Layers  Create a new file the same size as the GIF file.  Use Magic Wand to select a state.  Copy the State.  Past the state into the new file.  A new layer appears. Name it after the state.

Creating the Layers, II  Create a layer for each state.  Save the image: LayeredMid.psd  Switch to ImageReady to create the ImageMap.

Creating the Image Areas  Selected the desired layer from the layer menu.  Use the magic wand to select the area.  Select Layer> New Layer Based Image Map.  Default shape is a rectangle (Upper Peninsula)

Creating the Layer Image  Select Shape: Polygon.  Name: Name of image map (MidStates).  URL: Name of page to load when this area is clicked (Michigan.html).  Target: Frame where page is loaded (rightFrame).

Creating the Image Map Layers Continue to select states, creating a new layer for each. As each image layer is created a hand is added to the Layers option.

Creating the FrameSet Page  Create the FrameSet Page.  The image map is the left frame.  A Directions.html page is initially loaded in the right frame.

The Image Map Directory  The FrameSet page is initially loaded.  The Image Map (Layered.html and its associated images are in the left frame.)  The Directions file or one of the state files is loaded in the right frame.

Selecting an Image  Click an image map area.  Information on the state is displayed in the right frame.