Two ways to image map

This is a sample map made with Photoshop's "slice" and "save for web" tools. It's a good job -- in most cases the state names are clear and the links work. However, there's an alternative way to do the same job. As a substitute for the repeated assignment on the syllabus, learn to make both kinds of map.

While Photoshop is an excellent image-editing program, it creates the map in your original assignment with a three-step process:

1. It slices the image into pieces so that some of them can have Web links. (Right-click or control-click on any part of the map and choose "view image" for an example of a slice.)
2. It arranges the slices in an HTML "table," the old approach to presenting complex visual information on a Web page.
3. It makes selected slices links to Web addresses.

The problems with this approach are:

1. The "sliced" image can't be edited easily if you discover that a link area is too small or text is hard to read..
2. Photoshop writes very inefficient HTML code.
3. Current Web design standards try to reserve the "table" codes for actual tables, such as phone book listings, and use a newer technology, Cascasding Style Sheets, to control the visual design of a page.

What do we mean by "inefficient code"? The "map" has 45 separate "slice" files in a folder, plus an HTML file full of "table" codes to load them -- more than 200 lines of code! It is possible to manipulate that code to do things like positioning the whole map next to this text, as I've done on this page, but it would be easier if the map were a single image instead of all those slices and table rows and cells. At the end of this page, I'll link to another way of making the map -- one that uses only one line of HTML code for each state.

In some cases, the HTML of your map pages has added fine white lines to the edges of the sliced images. (If that happened to you, invite me over to look at your code.)

To make changes -- such as improving the contrast of the word "Florida" and the map background color, you would have to go back to Photoshop and redo the whole thing. Or you could try to find the slice with the display problem and and correct it with Photoshop's paint or healing tools.

However, the sliced image was saved as a "jpg" file, so each time we edit it, it deteriorates, which can reduce the contrast of letters on a background, or add general fuzziness as shown in the enlarged slice at the right.

When working on a "real" site, always do your editing in a Photoshop PSD file, save it when it's finished, then use "Save for Web and Devices" to save a ".jpg" or ".gif" version.

• Use GIF or PNG for images with lots of solid colors.
• Use JPG for photographic images or images with gradual changes in color.

Keep your original PSD files handy while your project is being developed. If you notice a mistake, go back to the PSD to make changes.

You do not have to put PSD versions in your public_html space, just the JPG, GIF or PNG versions. In fact, original PSD images are often large files that will eat up your storage space -- so save a copy on a USB drive or on your hard drive and delete them from the "H drive" when you are done with a project.

The Image Map Alternative

Here's the alternative way of making a webmap -- using a single image and Dreamweaver's image-link markup tools: Dreamweaver Image Map Example