Etext HomeGeneral InfoCollectionsServicesFeaturesStandardsContact UsQuestions?VIRGO

HTML IIb: Image Maps

Electronic Text Center
Alderman Library
University of Virginia
Charlottesville, VA 22904
434.924.3230

These instructions are for items that can be used from a UVa "public_html" account. See also
HTML I: A Basic Helpsheet
HTML IIa: Tables and Frames


Client-side Image Maps

Some Examples:

A Sample Image Map

http://www.lib.virginia.edu/map.html

http://etext.virginia.edu/railton/innocent/webmap.htm

Client-side image maps are inline images in which owner of the page can designate geometric areas within that image as active hypertext buttons. There are currently several software packages designed specifically to create image maps:



Some Image Mapping Tools

http://www.ihip.com/tools.html


MapEdit

http://www.boutell.com/mapedit/


Using MapEdit

When started, MapEdit will begin with a window asking for:

  • The name of the "Map or HTML File" to be used. This is the file that will contain the HTML data declaring coordinates, shapes and URLs. Enter either the name of an existing file or the name you wish to give a new one.
  • The "Image Filename" to be used. This refers to the graphic to which you wish to add Image Mapping information.
  • The "Create Type" choice of "NCSA" or "CERN." Select "NCSA."

Having entered the appropriate data and selections, click on the "OK" key. The image you selected will appear, and you will have the option of defining three geometric shapes:


  • Rectangle. Select the "Rectangle" option under the "Tools" drop-down menu, or click the green rectangle on the tool bar. Move your mouse to one of the corners of the area you wish to make into an active link. Single-click the left mouse button (do not hold it down) to activate the definition feature, and move the cursor to the opposite corner of the link area. When the rectangle on the screen matches the region you wish to hot link, click the left mouse button again. A window will appear prompting you for the URL you wish to link to the mapped image. Enter the URL and click the "OK" button. If you'd like to add the "ALT=" attribute to the image, place the text you wish to appear in the "Alternate text" section of the window.
  • Circle. Select the "Circle" option under the "Tools" drop-down menu, or click the blue circle on the tool bar. Move your mouse to the center of the area you wish to make into an active link. Single-click the left mouse button (do not hold it down) to activate the definition feature, and move the cursor to an outer point of the link area. When the circle on the screen matches the region you wish to hot link, click the left mouse button again. A window will appear prompting you for the URL you wish to link to the mapped image. Enter the URL and click the "OK" button. If you'd like to add the "ALT=" attribute to the image, place the text you wish to appear in the "Alternate text" section of the window.
  • Polygon. Select the "Polygon" option under the "Tools" drop-down menu. or click on the red triangle on the tool bar. Move your mouse to some point on the polygon you wish to define and single-click the mouse button (do not hold it down). By moving the mouse and single-clicking you can define a polygon of any shape. To finish the polygon you needn't bring the mouse back to the starting point. Instead, move the mouse to the last point on the polygon and either single-click the right mouse button or hit the "Enter" key on your keyboard. A window will appear prompting you for the URL you wish to link to the mapped image. Enter the URL and click the "OK" button. If you'd like to add the "ALT=" attribute to the image, place the text you wish to appear in the "Alternate text" section of the window.

To save the Image Map information, select "Save As..." from the "File" drop-down menu. You can use the filename you declared upon opening MapEdit or you can rename it. Make sure that the option "Client Side Map (HTML) is selected under the "Save As Format" section.

MapEdit Output:

Map Edit generates a file that looks like this:

<!-- This is a server-side imagemap converted to client-side by Mapedit. As a demonstration, this document also contains an inline image with an appropriate USEMAP attribute referring to the map. To use this map in another document, just paste the map into that document and set the USEMAP attribute for the appropriate inline image. -->

<h1>Converted Imagemap</h1>
<img src="main.gif" usemap="imagemap.html#map1">
<map name="map1">
<area shape="rect" coords="300,0,466,100" href="test1.gif">
<area shape="rect" coords="470,0,660,100" href="test.html">
<area shape="rect" coords="138,0,294,100" href="test2.gif">
</map>

Clip out everything below <h1> line, i.e., all of the <img>, <map>, and <area> tags, and drop them into your parent HTML file.