“Image Map” = an interactive web picture. Clicking on various areas will take you to different web pages.
My web chops are 20 years out of date. I remember using GoLive (WYSIWYG HTML), before it was acquired by Adobe and then abandoned; I missed the rise and fall of Flash; I’ve only read about CSS and HTML-5. My web work is mostly limited to making headers and infographics that other people place on Facebook or on WordPress websites.
I took on a project from a friend-of-a-friend to do four large (1600px x 900px) image maps. Here’s a rough description (with actual details changed):
> A simple, non-detailed drawing of Italy, on which there are 30 photos of animals native to various parts of the country.
> The animal photos are “cut out” images – you just see the animal. You don’t see a rectangle of forest, trees or grass around the animal. This makes for much easier identification of the animal (since its shape is emphasized) and saves space.
>There’s a short caption beside each animal telling its name and the region.
> Clicking on the animal or the caption takes you to a detailed web page about that animal.
There would be similar wildlife maps for, say, Alaska, New Zealand, and Panama.
The art is being done in a Photoshop-type program (Affinity Photo) with everything on separate layers. I’m planning to do the actual image mapping in GIMP (a freeware Photoshop-type program). Supposedly GIMP has good image mapping features that would let me outline the animals in rectangles or polygons, and assign web links to those shapes – and specify “mouse-over” labels.
My understanding is that using CSS would entail having visible rectangles around any interactive areas. I don’t want each outlined animal surrounded by a rectangle.
MY QUESTIONS:
- Is there a better way to do this?
- What’s a good way to make these maps usable on phone browsers? (A much smaller version of the illustration with proportionally larger captions?)
3 (and beyond). Other comments? Can the type captions remain type rather than bitmaps? Etc?