Many of the web sites that you may visit on the internet today use Image Maps to help in the navigation of the web site. Before the days of Image Maps, web designers and developers relied on simple HTML text for navigation or created single images for each and every section to which the user could go within the site. Today, that practice is not very popular, thanks to Image Maps.
 
Basically, there are two types of Image Maps —
Server-Side and Client-Side. Server-Side Image
Maps were the first available type of Image Maps
but were slow because it relied on a script located
on the host machine. Today, the most-often used
style is the Client-Side Image Map, which is
faster and easier to create than Server-Side Image
Maps, and requires little or no help from experts.
Quick-n-Dirty Tour
The first item needed to create your image map is of course the image itself. To get things started, we will use the image below to set up the needed navigation to go to other pages within our web site.
 
Each element —the square, triangle and circle — shall act as a separate link to its own page. When a user passes his or her mouse over these objects, this will be indicated. Clicking on each image will take the user to a different page. Keep in mind that this is a whole image, not three individual images as one might think.
The next thing you need to do is download the best image-mapping  
utility available for the Macintosh, called Mapper by Nisseb Software
at http://www.calles.pp.se/nisseb/mapper.html. This handy little
shareware utility will make the task of creating the Client-Side Image Map a breeze, thus saving much time compared to creating one by hand. It works by coordinating X and Y points on the image using a graphics-style application.
Using Mapper is fairly straight-forward, and the application has built-in help (accessed via the Apple Menu) available so that you can instantly find information regarding the in's and out's of Mapper.
Once you open Mapper, you will see the tool palette that you will use to "trace" your images to define the coordinates.
 
The tools you have available are the "Square," "Circle," "Point-to-Point," and "Freehand." The next thing to do is "trace" your images. In our example, the first image would require use of the "Square" tool. Simply select the "Square" tool, and drag it over your image, and create the area you wish to be active. You don't have to be perfect, just close enough to enclose all the area that you need. Then, in the text box, type in the address (URL) that you want the square to send the user to. For example, I would input square.html. That link is now defined. Then simply select the tool you wish to use on the next image, and repeat the process for each of the images. It's that simple.
After you have "traced" all the images that you wish to be active, simply save the map file on your hard disk, and open it in your favorite HTML editor, such as BBEdit Lite at http://www.barebones.com/.
Some Assembly Required... (well, not that much)
The output of our above example would look something like this:
Basically, that's it. It looks good and you're ready to use the Image Map in one of your web pages. This isn't nearly as hard as doing it the old-fashioned way. Once you create and begin using image maps, you'll wonder why you never did before!
  Hot Tip
To help you along even further in the creation of your image map, use Mapper's other useful function, the HTML Source output. The above example shows the IMG SRC in red, and that information can be obtained by selecting HTML SOURCE... from the Object Menu in Mapper. Simply select Copy from the dialog box, paste it in your HTML document, and you're done. What could be simpler than that?!?
Le Colophon
These are just some of the many ways you can add a bit more life to your new or existing website. Experiment with these tips to produce just the right look for your site.
If you are interested, you can visit my personal website at
http://junior.apk.net/~rjl/ and take a look at some of my current work.
Also, if you or anyone you know is looking to have a website created or re-done, I can help you create an award-winning site. Contact me at rjl@apk.net to make your dreams a reality.
