Welcome to the Attotron JavaScript ImageMapper

This program can be used to produce client-side image maps from a GIF or JPEG image. It is explained in the image map below, which was made using ImageMapper. There are also written directions below the map. At any time, you can click the HELP button in the right frame to bring up this file in its own window.


  1. Enter the complete location for the image you want to map in the box labelled "Image location" in the right hand frame, then click the "Load Image" button. The image will be opened in the left hand frame.

    The location of an image to be mapped can be either a URL or a file path and name. An example of a complete URL for a GIF image is:


    Notice that this is very similar to the URL for a web page, but the file name at the right hand end is for an image file, rather than an HTML file. If you paste a HTML URL into ImageMapper, you will only load a broken picture icon in the image frame.

    You can type a URL into the box, or copy one from somewhere else and paste it in. For practice, try copying the example URL above and pasting it into the Image Location box (click the Help button to see this file again at any time.)

    To make a map of a file on your own hard drive you need to specify the file the same way you would if you were opening it in a browser window, starting with "file:///". The easiest way to be sure you have all of the information correct is to open the file in a web browser window using "File:Open:Page in Navigator". You can then copy the contents of the browser's "Location" box.

  2. Clicking on the image loaded in the left frame causes the coordinates of the spot to be recorded in the Map Coordinates box of the right hand frame. Clicking on more spots adds more coordinate pairs to the set.

  3. The coordinates can be used to define one of several kinds of hot spots:

  4. Be aware that if two hot spots overlap, only the one on top will work. Hot spots that are overlapped by other hot spots do not work at all.

  5. Hot spots are connected to some response that occurs when the user clicks the hot spot. Two types of responses are supported by ImageMapper:

  6. In order to place your image map on a server, the most straightforward approach is to have the map and the image in the same directory on the server. If you have used an image URL from the World Wide Web (such as "http://www.attotron.com/pub/map/btx.gif") to make your map instead of a local file, you will need to make a copy of the image to put on your server. Just point to the image with your mouse and right-click (in Windows) or hold the mouse button down (on a Macintosh) to bring up a menu that lets you save it to a file on your hard drive. If you do make a map from someone else's image, be aware that images on web pages may be copyrighted, and you need to have the owner's permission to use images on your site.

    It is not absolutely necessary for the image map HTML file to be in the same directory as the image. In fact, the Preview maps generated by the JavaScript ImageMapper use the HTML "<BASE HREF>" tag to define the absolute directory path in which to find the image. You probably don't want to do this unless you are reasonably familiar with HTML and you know what a "path" is. You can view the HTML source of the Preview window to see how this is done.

This program is part of the Attotron Quizmaker Suite