Online Services Imagemap How To

State of Oregon - Online Services

155 Cottage St NE Salem OR 97301

Phone: 503-378-2135 Fax: 503-378-5543

Imagemap How To

The services below are provided to users of Online Services for use in web pages on this server. Online Services does not provide consulting, development, instruction or training for any of these services, or web page development in general. Please use the documentation provided with each of these services for support. If you feel there are errors in any documentation or problems with any of these services, please contact Online Services Support.

Online Services shall in no way be responsible for any damages or losses resulting from the use of any of these services. Please refer to the Online Services User Agreement for further details on usage policy.

This document explains how to set up an imagemap on your own personal web page. Please be sure to read the requirements section. The options section provides information on using your imagemap.

Overview

A clickable imagemap allows you to define areas on a graphic as "active" or "hot". When clicked on, these areas function just like any other HTML link. The graphic must have a corresponding "map" file, which the web server will use to map the coordinates of the mouse click on the graphic to a corresponding URL. The map file is a plain text file that stores the translations between coordinates and URLs. It can be created by hand or with the assistance of a map editor.

You may use as many imagemaps as you like (disk space permitting) and include multiple imagemaps on a single HTML page or the same imagemap on multiple HTML pages.

Requirements

1. The browser must be able to display images. If the browser accessing your page is text based (such as lynx) or has image auto-loading disabled then it will not be able to use your imagemap.
2. The browser must support imagemaps. Imagemaps are triggered by including the ISMAP or USEMAP commands in the <img> tag. Browsers that do not support these commands will not be able to use your imagemap. Fortunately, most current browsers (Netscape, MS Internet Explorer) support imagemaps.
3. A corresponding map file must be created for each graphic you wish to use as an imagemap. The map file is a plain text file that stores the translations between the mouse click coordinates on your graphic and the corresponding URL. This file can be created by hand or with the assistance of a map editor.
Options
It is highly recommended that you use one of the many freely available map editors to create your map file. This tutorial does not explain the syntax for creating map files and assumes that you have already created your own. The map file should be in the NCSA format.
1. Each graphic you wish to use as an imagemap must have a corresponding map file. The map file should have the same name as the graphic with the file extension .map. For example, if your graphic is named star.gif, then the map file should be star.map. Place the map file in the same directory as the graphic on the web server.
Position the graphic in your HTML page as you normally would using the <img> tag. Then, wrap an <a href> tag around the <img> tag to make it an HTML link. The URL in the <a href> tag should point to the map file. Finally, add the ISMAP command to the end of the <img> tag. For example, to make the graphic star.gif an imagemap, you would add:
<a href="star.map"><img src="star.gif" ISMAP></a>
to your HTML page. You may also want to add BORDER=0 to the <img> tag to get rid of the colored "link" border around your image. The ISMAP command tells the browser to send the coordinates of the mouse click on the graphic to the web server. The server then uses the map file to find the URL associated with those coordinates. This process is known as a server-side imagemap because the web server does the translation from coordinates to URL.
2. Some newer browsers also support client-side imagemaps, in which the map file is embedded into the HTML page itself and the browser handles the translation from mouse click coordinates to URL. These imagemaps use the USEMAP command and HTML specific <map> tags. Client-side imagemaps are relatively new and thus will not work with as many browsers as server-side imagemaps. You can find further information on client-side imagemap HTML specific tags at the World Wide Web Consortium or Netscape.

Online Services is a division of the Technology Support Center - State of Oregon