Getting Started / Ways to Capture / Cropping Notes / Converting with LView Pro / Making the Image Map

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 in an image remains fixed. In other words, all computers see the image and its font style the way you intended it to be seen, because an image map is a gif or jpg.  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 its 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 "FrontPage 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.

Capturing your Images

• On Windows machines, you can capture the screen with the Print Screen key (PrtSc). You can capture just the window that is open (client area) with Alt + PrtSc. The image is stored on your Clipboard.  From there, open almost any paint or graphic program and Paste from the Clipboard to the application for editing.  
• On Macs you can press Shift Command 3 for a complete screen shot or Shift Command 4 to select part of the screen.  The image is stored on your hard drive as Picture 1, Picture 2, etc. which you can open and edit using almost any paint or graphic program.
• On either platform, you may also Export your HyperStudio screen.  Go to File => Export Screen and HyperStudio will save your screen as a BMP picture file (PC) or a PICT (Mac) which you can convert to GIF or JPG using the directions below.  

Cropping your image and saving it as a GIF or JPG image

• Now the fun begins. You can crop your image in PhotoShop or Graphic Converter (Mac) or LView Pro (PC) and save it as a GIF or JPG image.  Essentially, that's why you need a graphic program in this step. You need to turn your nice HyperStudio picture into a GIF or JPG image.  Remember, GIF and JPG images are small image files that all web servers handle routinely.  Your images need to be in either of these formats.

Note:  I'll use LView Pro in this step.  I like it because it is simple and fast!  However, LView Pro is no longer shareware. This means, that if you try the program and want to keep it after 21 days, you must buy it for $40.  You can also search around the web to find freeware or shareware graphics programs that you prefer.  Graphics Workshop Classic, for example, is shareware.  It is an excellent graphic program.  There is no trial time period, but if you like it, you may register Graphics Workshop Classic for $40.  

More to note: You may already have a graphic program on your hard drive that converts any image format to GIF or JPG.  For example, if you purchased FrontPage, you also received the image composer or image editor packaged with FrontPage.  Those will convert images to GIF or JPG format.  

Last thing to note:  Microsoft Paint comes with Windows.  It can do just about anything you need to do in preparing to make image maps.  If you want to skip the LView Pro procedure, and you don't want to fiddle with Graphics Workshop Classic, use Microsoft Paint.  Click on the link to go to a brief lesson and you can skip the LView Pro stuff below.  

LView Pro Stuff (No thanks, I want Microsoft Paint)

• Launch your image editor (I'm using LView Pro) and go to "Edit" => "Paste". You'll see your entire screen and your cool image before you.

• Use the rectangle selecting tool to select only the part of the image you want as you see above. 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" => "Crop".
• Save the image in your Web Site folder 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.  The image at the right is a gif, whereas the image above is a JPEG.  Notice the difference in clarity?  It is also clickable.

Adding the graphic to FrontPage

• 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 FrontPage. 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! Click on your new image. It is now framed.
• After you click on an image, the FrontPage tool bar at the bottom of your page changes to allow you to select places on your image that you want to make into clickable spots. Use the rectangle selecting tool to put a rectangle around the word or image you want to be a clickable link .

• Use Control K to make a new link. Browse to the file you want to link to and make your 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 "File" => "Preview in Browser" and test your image map.

That was really complicated, but fun!

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

On to Lesson 6: Uploading