Client-side imagemaps

These instructions are for the creation of client-side imagemaps using Map This old free version. I recommend the use of Mapedit instead, as discussed in my main tutorial of client-side imagemaps. MapThis has extensive help information when you select HELP, please use it to suplement these instructions.

Imagemap development overview using MapThis

In order to create client-side imagemaps you need to have two components:

an inline image saved in gif format: this will not be covered in this tutorial. You can use software packages like MS PowerPoint, Corel Presentations, Freelance and/or Showcase for this purpose. You can also use images copyright-free that you can collect in the Net. See my tutorial on graphics.
an HTML document using regular markups and including an imagemap created by MapThis.

Creating a client-side imagemap file

To start this section you need to have created, or have available a gif file that you will use as the clickable image.Then proceed as follows

open MapThis and you will see this screen.
select File new and you will see a dialog telling you that you need to select an image. Click OK.
as soon as you do it, MapThis will open a file dialog for you to select the image you will use to create the imagemap. In the example I selected BIGFISH.GIF.
select the image and you will see your image inside MapThis ready to be mapped like in this example.

Creating the hot-spots

use the circle if your image has areas of this shape. This example shows how the circle tool looks like. Click to end drawing the circle. Another dialog will ask for the URL and name for this hotspot. Enter the absolute or relative address, as applicable, where the hotspot should lead to.
use the rectangle if, again, your image has areas of this shape. This is an example. Again, click to end, and enter the absolute or relative address where the hotspot should lead to.
use the polygon for all other cases. Left-click in the beginning and in each point of the part of the image you are drawing the contour. One more time, enter the absolute or relative address where the hotspot should lead to. (In our example we completed the mapping with circles).
Select File, Save As and you will see a dialog to enter the URL for the case when the person does not click in the hotspots and a title (name of the imagemap). When you finish entering the default URL and name of the imagemap (title) press OK In the example I called my imagemap bigfishmap and used a relative address ocean.html.
As soon as you click OK another dialog allows you to save the imagemap file. I suggest you save this file as HTML, as in the example.
Note: you just finished creating the imagemap, but you are not done yet. In Mapedit you would be, but MapThis requires some additional steps.

Inserting the image and creating a link to the imagemap

Open the recently created imagemap HTML page in your preferred editor (avoid Word in this case), as shown in this example in Homesite.
Only the imagemap was saved, the page is missing the image! Insert the image in the page (in Homesite just drag and drop after the Body tag), as shown in this other example.
Finally, you need to link the image to the imagemap. Just add USEMAP="#themap" to the image tag, where #themap is the map name, the name you entered in title before. In our example we added USEMAP="#bigfishmap" to complete the page and saved it. Click to see it working.
Don't forget to upload your page and the image to Home, after testing locally.

This page is maintained by Al Bento who can be reached at abento@ubalt.edu. Although we will attempt to keep this information accurate, we can not guarantee the accuracy of the information provided. This page was last modified November 17, 2003.