Introducing the “Welcome to Xojo” Bundle!

New to Xojo and looking for guidance? We've put together a terrific bundle to welcome you! Xojo Bundle

This bundle includes six back issues of the magazine -- all of year 19 in printed book and digital formats -- plus a one-year subscription (beginning with 20.1) so you'll be learning all about Xojo for the next year. It's the perfect way to get started programming with Xojo. And you save as much as $35 over the non-bundle price!

This offer is only available for a limited time as supplies are limited, so hurry today and order this special bundle before the offer goes away!

Article Preview

Buy Now

Issue 5.4



Issue: 5.4 (May/June 2007)
Author: Toby Rush
Article Description: No description available.
Article Length (in bytes): 4,177
Starting Page Number: 10
Article Number: 5407
Related Web Link(s):


Full text of article...

Aside from the standard formatting and structure elements, there are a few special features from the earlier versions of HTML that remain commonly used today. One of these is the image map: a method of defining areas in an image that, when clicked, will each link to a different URL. Image maps are incredibly useful for geographic map images, for building plan images, and for any other image which contains oddly shaped areas which can serve as buttons to other pages.

YokMap simplifies the creation of image maps by allowing you to draw the shapes directly onto the map, and allowing you to set the attributes for each area. The image maps can then be saved as an HTML document, ready for inclusion in a web page.

YokMap allows for the creation of all three possible shapes of areas: rectangles, circles, and polygons. Rectangles and circles are, by default, drawn corner to corner; however, they can be drawn from the center by holding the option key down. Polygons are drawn by clicking once to create each vertex, and double-clicking to complete the shape. Any shape can be resized (or, in the case of polygons, reshaped) by using the move tool and dragging the control points for each shape.

When an area is selected (as it is immediately after being created), the Attributes window allows you to determine the pertinent attributes for that area. The attributes that can be set are the link or URL for the area, the alternate text to be displayed for non-graphic browsers, the link target (for dealing with frames or the creation of new windows), the title or tooltip text that is displayed when the mouse is held over the area, the access key that pertains to the link, the tab index for the link, and the area's unique identifier (for scripting purposes). The coordinates themselves can be edited in this window, and script events (like onMouseOver or onMouseExit) can be indicated as well. The window even allows the creation of new attributes, allowing the program to be adapted to new versions of HTML.

The program fulfills these basic functions very well, but goes further to add an extra layer of elegant usefulness with several other features. A menu item allows you to easily see the tab order of the areas in your graphic. The object menu allows overlapping areas to be moved from front to back and vice versa. Another menu item automatically sends a preview image to the default browser, allowing you to test out the image map. The program offers control over how the areas are highlighted and even whether or not the Attributes window should be attached to the main window or allowed to be moved separately.

Perhaps the most useful hidden feature of the program is the ability to open image maps in existing documents -- even if they were created by another program or in straight HTML -- and the ability to edit and save the image maps back into the HTML document without affecting the surrounding code. The program will even open image maps in other common formats and translate them between formats.

YokMap is a useful tool with an excellent, polished interface; web designers will find it a valuable addition to their toolbox.

End of article.