Tutorial: Image maps

It's possible to allocate a web address to any object, which you need to do for each component of an image map.

Assigning a web address

To add a URL to an object, select the object then select Utilities > Web Address. Alternatively right click the object and select Web address.

Enter your chosen web address. Xtreme will automatically convert www.xara.com to the full http://www.xara.com address

If you want to create something like a button, text can form quite complex shapes and so a user might find it difficult to click exactly on the image when it appears on a web page. So, the best thing to do is attach the web address to an imaginary rectangle surrounding the complete logo. To do this just select Rectangle Surrounding Object when setting the address.

However it is more likely that you will want to stick to the exact shape of the object. For example, you could create a clickable map where the countries of states can be clicked. For this tutorial, we'll use a map of Great Britain (below). You can download the .xar file so that you can try this tutorial for yourself, or use an image of your own.

For each object that you want to be clickable, assign a web address following the steps above.

Exporting

There are two options for exporting image maps once you've attached your links. You can select the HTML file format when you are exporting. Just choose File > Export and then select Image Map (*.htm, *.html) in the File Name drop-down list. You might take this route if you are creating an image map out of an existing bitmap.

Or you can export both the image map and bitmap at the same time. Export the graphic in the normal manner of File > Export, and then when the options dialog appears click the Image Map tab.

In both cases you will see a dialog that gives you control over the various options for an image map. You can save the image map text—the map and image tags, which associate the map with its images—either to the clipboard or to a specific HTML file (check the appropriate box). If you save it to an HTML file it will overwrite any existing image map of that name within the file, or if it's a new name then it will be inserted at the end of the HTML file.

You can define how closely you want the outline of the clickable areas within your image map to follow the actual curved lines in your image with the Approximate Curves With Lines drop-down list. Selecting Very Closely will give the best approximation, but will also make the image map file size larger. Selecting Save All Clickable Areas as Rectangles just places a clickable rectangle around the image—it gives a rough approximation but the smallest file size.

Now you're done—give your image map a name in the Name box and click Export. If you want to preview the image map within a browser first, then click the Browser Preview tab, check the Image Map option and click Browser Preview

©2006 Xara Group Ltd.