Cosmopolitan Productions | More guides & tutorials | Mad in Pursuit  | Contact

PAGE 2 | continued from PAGE 1 | final product

Image Ready Slices

You've done all the groundwork. Your elements are all in place. Now... File > Edit in ImageReady...

With the Slice Tool (K), outline each memory place "button."

In the Web Content Palette, rename each memory place slice to match the groups, etc in your Layers palette. To do this, highlight each slice in the Web Content > Slices palette; double-click and change name.

The results are seen below.

Turn the Memory Places into Rollovers

You will now create "remote rollovers" connected with each button slice.

Select a slice, like "Clliff." Right-click and select Add Rollover State. The default is "Over." Select the Over rollover state. In the Layers palette, turn on the visibility of associated bubble group "Cliffs Bubble."

The screen shot below shows the setting of the rollover state for the Cliff slice in the Web Content palette; turning on visibility for for the Cliffs Bubble group; and the resulting appearance of the appropriate text.

Repeat this step for each named slice that gets a rollover. Don't forget to Save your work.

Preview

Preview your work by selecting File > Preview In > Firefox (and/or other browsers). Problem: The first time I did this, the bubbles showed up only where they intersected with the named memory place slices. Damn... Solution: in the Web Content menu, I selected Find All Remote Slices. This bring all the involved slices into the Web Content palette. Slices that contain bits of the text bubbles are now marked with a bulls-eye, since they have become the targets for remote rollovers.

Creating a web page

Once your preview looks okay, you're ready to finish up and create your web page. First, go through your output settings (File > Output Settings > ...) to make sure you'll get what you want. The slices can be converted to an HTML table or to CSS. I'm sure the tables option is considered clunky and old fashioned, but (since I usually want to do a lot of editing on the page I generate) all that CSS code overwhelms me.

When you think you have the settings where you want them: File > Save Optimized... Provide a name for your HTML page. The sliced up image will all be saved as a bunch of little JPG files in an Images folder.

The results

Look at the web page I produced in the course of this exercise. Run your cursor over the rectangles for your interactive experience. Far out. If your map has problems, here is my final Photoshop file for you to reverse engineer.

Feedback

Did you try this tutorial? Did it work for you? Let me know if you have any suggestions.

12.16.05 (revised 01.03.06)

Cosmopolitan Productions | Cosmo Resource Page | Mad in Pursuit  | Contact