Vector Studio Part III -- Creating A Simple Image Map in Illustrator, CorelDRAW and FreeHand

Adobe Illustrator 8, CorelDRAW 9, and Macromedia FreeHand 9 all have the ability to create an image map, and the HTML code needed to display the image map and it's hot spots. FreeHand 9, recently released, can also create a Flash image map, Macromedia's scalable vector web file format. In this article I'll show you the steps needed to create a simple image map with three hot spot linked buttons like the one shown here.

So what exactly is an image map? Well, I'm glad you asked. An image map is a bitmap image (or in the case of Flash a vector image) with "hot spots" that when clicked in a web browser such as Netscape Navigator, link to other HTML pages, images, sounds or functions, such as launching an e-mail window. What's cool about image maps is the hot spots can be virtually any size and shape, although a rectangular shape produces the most compact file size. Hot spots can be words, graphics, symbols, photos, an area of an image or photo, or if you like to be obscure, they can be invisible, and the user has to search the page until the selection arrow turns into the hand cursor indicating a hot link. I don't recommend the last method unless you are creating an image map for a Psychic's Convention web site. But remember, even posters for Psychic Conventions have dates and times.

In this article we will use two symbol fonts to create our image map, Carta, also known as Geographic Symbols, and Webdings, a Microsoft symbol font that is installed with many Microsoft products. In case you don't have these symbols, you can be creative and substitute. Ready? Let's split into groups. Illustrator users click here. CorelDRAW users click here. Macromedia FreeHand users click here.

CorelDRAW X5 Unleashed Multimedia Training DVD

CorelDRAW Unleashed Training Boot Camp

Vector Studio Part III -- Creating A Simple Image Map in Illustrator, CorelDRAW and FreeHand