2

I normally avoid using Adobe products for web development because they create pages that are so illegible.

However, I've begun to get a series of requests that basically entail adding links and JQuery tool-tips to a complex image to create a kind of interactive poster on a single web page. Since all the original files are in Illustrator, I suspect there might be a good way to make such a page without writing the complex CSS from scratch.

I have access to Illustrator, Fireworks, Dreamweaver...What's the best way to make the pages?

My embarrassing but pragmatic priorities: 1. Ease/speed of workflow 2. Speed/quality of front-end experience & cross-browser/device compatibility 3. Accessibility, valid syntax, etc.

Thanks!

Beatrice
  • 99
  • 1
  • 9

1 Answers1

1

I would suggest to create an ImageMap using Fireworks.

See http://help.adobe.com/en_US/Fireworks/10.0_Using/WS4c25cfbb1410b0021e63e3d1152b00d35d-7fe4.html

Julian Hollmann
  • 2,902
  • 2
  • 25
  • 44
  • Thanks. Just so I understand completely, I can save the image as a sliced up html file with the various slices saved in formats according to content (e.g. solid color squares could be saved as an index .gif, while portions with photos are saved as high-quality .pngs). This page definitely loads fast. Can I then make an image map on top of that for the links and tooltips? – Beatrice Mar 06 '12 at 15:47
  • You don't even need to slice it, you can add segments with fireworks and fireworks creates an imagemap for you: http://en.wikipedia.org/wiki/Image_map – Julian Hollmann Mar 06 '12 at 15:49