by Gary W. Priester
February 9, 2000

You probably already know that Xara is a great application for creating web graphics. What you might not know is Xara is also a great tool for creating Image Maps. Xara can not only create the Image Map and the associated links, it can also write the required HTML code. And as if this were not enough, Xara gives you the option to write the information to an HTML document, to the clipboard, or to both, from where you can paste it into your HTML editor or web page creating application.

If you are not familiar with the term Image Map, here's a brief description. Image Maps are images or graphics displayed on web sites with hot spots that when clicked with the mouse, link to other pages, images, sounds or e-mail clients. Image Maps may be as simple as a horizontal or vertical bar with text, or a complex image containing various shapes and images, each linked to another page, image, sound or e-mail client. Image maps are composed of two parts, the bitmap image (either a GIF or JPEG) and the accompanying text that designates the hot spots.

Configuring Xara for the Web

In this first example, we'll create a simple button bar that will show you the basic steps needed to create any Image Map. But first, let's make sure that Xara is configured for Web work.

Click on an empty portion of the screen with the right mouse button. You'll know it's the right button if a pop-up menu pops up! Select Page Options from the bottom of the pop-up menu. In the Units tab, change the Units to Pixels. Change the Color Units to 0-255. Now select the Grid and Ruler tab. Set the Major Spacing to 100pix (key it in exactly like this with no spaces), and the Number of Subdivisions to 10. Press OK and you're ready to go. You can save yourself the trouble of doing this every time you create a new web graphic by saving a blank page with these settings as a Template (File > Save Template). Give your template a name other than Drawing or Animation. I call mine Pixels.xar. Next time you want to use these settings, select File > New and select Pixels.xar (or whatever you named your file) from the fly out list.

NOTE: Save your Template in the same directory as the other Xara template files. You will be offered this directory as the default directory. If you save your Template in another directory, Xara may have trouble finding the standard templates. Specifying another folder for a template file is often the cause of disappearing Animation functions.

Creating a Simple Button Bar

Right click on an empty portion of the screen again and select Snap To Grid. (The reason I keep asking you to click on an empty portion of the page is that Xara displays different pop-up menus depending upon what is being right clicked as we will see in a little while). Because we have set our Units to Pixels and the number of Subdivisions to 10, Xara will snap to a 10 x 10 pixel grid. Uneven Pixel amounts, say 12.3 Pixels may result in an image with a disturbing faint outline where Xara attempts to blend the row or column of fractional pixels into the background color.

Step 1. Select the Rectangle Tool and draw a horizontal rectangle, 20 pixels tall by 280 pixels wide. Set the outline to none (right click on the cross hatched box to the left of the screen palette to do this) and apply a red fill. (In Xara 2, select from the diamond-shaped web-safe colors.)

Step 2. Select the Text Tool and key in HOME. With the text selected, select Verdana Bold, (or a similar sans serif font) from the Font drop down list, and change the font size to 10 points. Make two duplicates of the text (Ctrl D) and change the text to PREVIOUS PAGE and NEXT PAGE. Align the three text objects as shown.

NOTE: Xara has two keyboard shortcuts for duplicating an object or text object, Ctrl D and Ctrl K. (Duplicate and Clone) The difference is by default, Ctrl D offsets the duplicate down and to the right whereas Ctrl K places the duplicate directly on top of the original.

Another NOTE: If you highlight text by dragging the Text Tool across the text, and start typing, often-but not always- Xara will revert to the default text size and style. While this can lead to insanity (temporary), there is a way to get around this. Place the text insertion cursor to the left of the text, and with no text highlighted, key in your text. Highlight the unwanted text and delete it by pressing the Delete key.

Step 3. Right click on the text HOME with the Selector Tool (the arrow cursor). Select Web Address… from the pop-up menu. This brings up the Web Address dialog. In the URL text entry window, type in index.htm and press Add. Leave the Target setting as is or change it to None. Select Rectangle Surrounding Object. Right click-select the text PREVIOUS PAGE, change the URL to last_page.htm and press Add. Select NEXT PAGE, change the URL to next_page.htm, and once again, press Add to add the URL. All text has now been linked and will remain so, even after you save and reopen your Xara document. If you ever need to edit your links, select the linked text or object, type in the new URL and press Change. That all there is to it! Our image map will now have three Hot Spots that will link to pages called index.htm, last_page.htm, and next_page.htm. You can change these URLs as you see fit.

NOTE: Whenever you create an image map, try to use the Rectangle Surrounding Object option as this creates the minimum amount of HTML code. By describing a rectangle, the code generated needs only to specify four points. The second option, Shape of Object, generates a lengthy bit of code describing a large number of points, which in the case of complex objects, may considerably slow down the load time on your document.

Exporting the Image Map

Step 4. The next step is to Export the Image Map. This is by degrees harder, but certainly not in the league with rocket science. (If it was, would I be trying to tell anyone how to do it?) From the File pull down menu, select Export. This opens the Export dialog. From the Files of Type drop down list, select CompuServe GIF (*.gif). Name your Image Map my_map and press Save.

NOTE: When typing names for files that will be displayed in web browsers, it's always a good idea to substitute an underscore ( _ ) for a space. Leaving a space between characters can often cause a file to be ignored by the server and it will appear in the browser as a missing image icon.

Step 5. After your press Save, the GIF Export Bitmap Options dialog appears. From the Approximate Curves with Lines drop down list, select Not At All. Check the boxes, Save All Clickable Areas as Rectangles and Export Image Map to: Clipboard, and to File. Exporting the bitmap to the clipboard will place a copy of the generated HTML script in the clipboard, while exporting to file will generate the script in an HTML document.

From the Palette Options tab, select Browser Palette and set the dithering to None. Press Export A to export the file.

NOTE: Xara 2 provides two side by side windows for comparing images in the bitmap export dialogs. You might want to see how an image looks with the Browser palette in one window and with an Optimized palette in the other. Clicking in either window selects that window and the Export button changes form, A or B, depending upon the selected window. The file size and image size are provided at the bottom of the window for comparison and monitoring the effect of changes.

The Missing Link

Here is the code that we generated for our Image Map. In theory, if we load this into a HTML document and display it, we should see our red bar with clickable text. Right? Uh, not exactly. For reasons best known to Xara, there is one bit of code that Xara left out. Without this omitted code, the browser will not display anything but white.

Step 6. Here is the missing text that is needed to display the Image Map and its hot spots. The text in red tells the browser to load the image called my_map.gif. The text in green is the Image Map's height and width. The BORDER=0 text tells the browser not to display a blue box around the image map. The final portion of the statement USEMAP="#my_map" is critical for the Image Map to display. The # is also critical and must precede the name of the Image Map, my_map. Equally important is the use of angle brackets and quote marks. You will need to add this top line of copy to the rest of the script in Word Pad or an HTML editor. The color of the text shown above is for illustration purposes only.

TIP: I often create an image map to help visitors navigate forwards and backwards for a web site. I use the next_page.htm and last_page.htm for the URLs. Then I copy and paste the image map text into each HTML page, changing the URLs to reflect the actual page names for the next and last page. Using next_page and last_page for the URLs makes it easier for me to remember which link goes to which page.

Preview This

So how do you know your image map is going to work? You don't. I'm just kidding! When you Export your GIF file, and after you have made your Palette and Image Map section changes in the GIF Export Bitmap Options dialog, select the Browser Preview tabbed section. Check the Include Image Information and Include Image Map check boxes and press the Browser Preview button.

Xara will launch your default Internet Browser and display your Image Map as well as file information and a range of download times for various modem speeds. You can see if the linked objects are linked properly by clicking on each of them. The cursor will change to a hand when it passes over the linked text. If you click on one of the links, you will get an error message telling you Xara cannot locate the linked file. This is OK because Xara has created a temporary file in the TEMP directory. If the error message says Xara cannot find index.htm, or any other specified URL, your hot spots are working.

Onward and Upward

This Image Map was very simple but covers all the steps you will need to know to create more complex Image Maps. And if you get stuck, don't forget to use Xara's excellent Help menus. This is especially true when you are in a dialog menu and are not sure what all the options are or what they do. Pressing Help in a dialog menu brings up context-sensitive help explaining all the options in the dialog.

Finally, here's a more complex Image Map I created that opens various illustrations from this article in separate windows. I simply entered the names of the image files used in this article and their extensions (filename.gif for example) in the URL text entry box in the Web Address dialog. If I had any sound files, I could link to them as well, and when the button was pressed the sound would load and play.

So there you have it. With any luck at all, Xara 3 (due out any day now) will add the missing text and make everybody's life easier. If you have any questions, comments or just feel like saying hello, drop me an e-line.

More articles from Gary W. Priester

Creating Tiling Background Images with Corel Xara 2

Optimizing Images for the Web with Corel Xara 2

Creating Animations with Corel Xara 2