Tutorial: Image Map Creation using MapEdit Software

MapEdit is a program, that is dedicated to the creation of Image Maps.  The program is a relatively small file, and can be downloaded here.  It is a shareware program which allows you to save/create 100 files for free.  The registration cost is only $15, so a bargain if you intend to design a number of image maps.

In this tutorial, I will be using the same image file, and linked files I used in the Fireworks Image Map tutorial. As in the Fireworks project, we start by creating, copying three html files to use as places to link to when the user clicks on a hotspot.  We will also need an image, and again I'll use the shapes.gif image.

(Screen capture images that were too large for this page, are displayed in thumbnail format, with a hyperlink to the full sized image.)

Files needed before you begin:

  • shapes.gif
  • rectangle.htm
  • circle.htm
  • polygone.htm
  • shapesME.htm* 

* MapEdit expects you already have a web page created, with an image inserted within the page.

So I created a simple page, put a title header on the page, inserted the image shapes.gif, then saved the page, as shapesME.htm. 

Keep all files in the same folder, then you can enter just the relative filenames for the hyperlink URL.


Please Note:When using Fireworks, you do not start with an html file, but that file is created by Fireworks.  With MapEdit, you place the image on a page then use MapEdit to generate the html code that defines the hotspot regions of the map.

Launch the MapEdit program and select the file open option from the menu bar.

Find the  html page with image, shapesME.htm, in my case.

 

MapEdit will let you select the image to be mapped, in this case there is only one image in the file, shapes.gif.

I selected the rectangle, the green square on the tool bar, positioned it on the top, left corner of the blue rectangle shape, pressed the mouse button and dragged the rectangle shape to cover my blue rectangle.  Notice the faint red border around the rectangle in the picture here.

When you release the mouse button you are presented with this hint.  This is where you are to input the names of the files to which you want to link when the blue hotspot is selected.

Enter the name of the html link file, being careful that the names is spelled correctly and in the proper case.

Fill in a value for the alternate tag but leave the remaining fields empty.

 

Repeat this process for the circle and polygon shapes.

Enter just the name of the link too file, if all of your files are in the same folder.  Careful how  you spell file names.

 

 

As you select a new shape tool, you will receive hints as to what is expected next.

 

After all three shapes have been mapped out, select the Save HTML document from the File menu.

 

The file that is saved has the appropriate html code to define the hotspot regions of your image.

You can open this html file in an editor to make changes to the file but do not insert or delete any code between the <map> opening and closing tags:

I think you will find MapEdit an easy program to work with.  It certainly beats plotting out all of the coordinates for an image map by hand.

  Good Luck!!

        

Last updated on 06/19/2008  by L.M. Hicks