Design pane
The design tab holds many of the editing features of the program and can assist in setting up your new image map! These tools allow you to specify different links using the right pane.
The Shapes menu includes all the icons needed for creating and selecting clickable areas in your image. There are three main tools that you allow you to control the mapped sections of your image map.
The Rectangle tool allows you to create a rectangular area. To use the rectangle tool click once, move the mouse to fill the area you wish to set and then click again to create the mapped area. While the Circle tool creates a circular area and allows you to use the arrow tool to move or resize the circle. Using the Polygon tool, on the other hand, allows you to draw a multi-sided mapped area yourself. Once you have drawn the area you want, simply double click to complete the mapped area.
The Selection arrow tool allows you to select a specific area, to change the size, move or edit the area information. There are three different colors the areas can be, the first is gray, it shows you where you have created a clickable area. The next color is light blue and means you have the area selected and can edit the information about this area in the right-hand panel. The red area tells you that the mouse is currently over this area, and you can click to select it.
Change the default colors
If the image you use has colors that match the default colors, this may make use of Image Mapper a little more difficult. Not to worry; you can change these default colors by going to Tools > Options.
The other tools found on the design tab, are the normal copy/paste, ruler, delete, cut, and zoom.
Right pane
The right-hand panel contains all the properties for the whole image map as well as each area you have created. Hovering your mouse over any of these areas will display a description of the area.
Area Properties
Use the drop-down menu to select an area or use the arrow tool to select it in the editing area and then edit the information. Here is where you will specify everything for the selected area, such as the URL you want a user to go to once they click an area. Alt text that will display in case the image does not load and a target for each area that tells the browser where the link will load. You can also setup a mouse over text that will display when a user hovers over the mapped area.
Mouseovers and mobile
Touch screen devices such as mobile devices and tablets are unable to see mouseovers. Image maps still function but without a mouse to hover over areas of the image map, you are unable to see at a glance where the click will take you.
Map Properties
Use this area to set the default information about the image map itself.
Name - This can be any name you want it to be just note that if you are using multiple image maps in a single HTML page all the names must be different.
Default URL - The URL a user will be taken to if they click on the image but not on a mapped section of the image.
Default Target - The default frame the link will open in.
Image Properties
This area displays the information about the image and where it is located on your computer.
File - The location of the image on your computer.
Type - The type of image you are using. (GIF, JPEG, JPG)
Size - The dimensions of the image.
Color Depth - The total number of colors that are in the image.
Preview Pane
The Preview pane provides you a place to test your image map without having to open a browser. The basic Back, Forward, Stop and Refresh buttons are located here to help with navigation, and you also have access to the Test in Browser drop down to check out your image map in a browser.
The Test in Favorite Browser icon allows you to select a different browser to test your image map. Navigate to the exe file for the browser and select it. This can be changed under Tools > Options as well.
Options
The Options area includes choices for area colors as well as for changing your favorite browser. You can also find settings for defaults such as if you do not want the wizard appearing each time you start the program, responsive image map, these can all be found under the Misc section.
Information bar
The Information bar is located at the bottom of the program and displays several types of useful information. The first section displays the coordinates of the exact point your cursor is at in the image. If your cursor is over a mapped area, then the URL will be displayed in the second section. The third section will show you the type of area your cursor is over as well as the coordinates for that mapped area. Finally, the last section will show you if you are zoomed in or out on the image.
