What are image maps?

Image maps are pictures (graphics or characters) that have clickable hot spots. Big deal, eh? By now you know that graphics and characters can be hyperlinks, so who needs a clickable image map? Well, image maps can make a complex site entrance simple because the whole page can have just a single graphic on it, yet that graphic can have several clickable hotlinks. Another good reason for using an image map, as you will see shortly, is that image maps allow you to save words as graphics which means that the font style you choose is preserved. Image maps can also be efficient, appealing to the eye, and intuitive. Here's an example of all this in the site entrance to the Pleasant Ridge School District. Click on any image and you'll go somewhere. This is a single jpeg image with clickable hot spots.

Getting started

There are several steps in creating an image map. Open any graphic program that will allow you to type words or add images. I like to use HyperStudio for this because of all it's options.

• In HyperStudio, make a new stack. Select the Text Tool, click on the screen, choose your text size, color, and font, and type some words: Let's say "PageMill Lessons" for example. Then add the specific lesson titles. (See below)
• Using the selecting rectangle, select and place each word so the words look just as pleasing as can be. You can even add clipart if you want, but make sure you add it as clipart and not as a graphic object.
• When you're finished, your HyperStudio card will look similar to this.

• Next, you Export the page. In HyperStudio, go to "File" => "Export Screen" and save it in your web site folder. HyperStudio supplies a unique name like New.Pic.04. You can save with any name you like provided you have .pic after the name. I saved this as proj_title.pic, for example. I also saved the HyperStudio stack just in case I want to come back to it later. Notice the name in the title bar in the example above.

Cropping your image and saving it as a GIF image

• Now the fun begins. You can crop your image in PhotoShop or Graphic Converter and save it as a GIF image. Essentially, that's all you need a graphic program for in this step. I'll use Graphic Converter in this step, because it's free. However, I tend to use PhotoShop whenever I can because I'm more familiar with it.
• Launch Graphic Converter and open your file: "File" => "Open". You'll see your cool image before you.
• Use the rectangle selecting tool to select only the part of the image you want. Don't waste a lot of space, because unnecessary space takes extra memory which makes your images sloooooow to load. Once your image is selected, simply trim it (cropping) by choosing "Edit" => "Trim Selection" (Command Y).
• Save the image as a GIF with lowercase letters and a dot gif (.gif). Images with words tend to appear clearer as GIFs. Image maps may also be JPEGs.

Adding the graphic to PageMill

• Now you're ready to add this graphic to your web page. You already know what to do since you've added graphics numerous times by now.
• Open a new page in PageMill. Select the background default that you want. In this case I will want white because the background to my image is also white. Add the image.

Making the clickable image map

• Finally! Double click on your new image. It is now framed.
• After you double click on an image, the PageMill tool bar changes to allow you to select places on your image that you want to make into clickable spots. Use the rectangle selecting tool that you find at the top of the PageMill tool bar to put a rectangle around the word you want to be a clickable link .

• Use Command M to make a new link. Browse to the file you want to link to and double click the file (or click and Create Link). Repeat this procedure with all the words or images you want to make into hot links.
• When you're finished, save your page. Go to "View" => "Preview Mode" and test your image map.

That was really complicated, but fun!

Check out the Site Entrance for this series of PageMill lessons. It was created as I wrote this lesson.

On to Lesson 6: Uploading