Carl's HTML Details

Full Page for Printing

Imagemaps

Image maps associate links with regions in an image. The MCCSC pages currently feature an imagemap on the school location map on the school page. Choosing one of the two-letter abreviations takes one to the home page of the school.

An image map in a Web page has three components

an image
a set of map data, and
an HTML host entry.

The image is a normal Web image, typically stored in the GIF or JPEG format. The map data set is a text file containing a description of the regions mapped within the image. The host entry is HTML code in the document.html file that positions the image within the Web page and designates the image as being an interactive map.

How map data is stored and interpreted depends upon the category of the map, either client-side or server-side. Client-side map data is stored in an HTML document file (and can be embedded directly into a file which contains the other HTML coding for the page). Client-side maps are dependent upon specific Web browsers and may not function with others. When a visitor to a Web page chooses within a client-side image map, the browser processes the map data without interaction with the Web server.

Server-side maps are interpreted by the Web server and should work on any browser. When a visitor to a Web page chooses within a server-side image map, the browser program transfers the coordinates of the choice to a program running on the Web server. This program then examines the map data and determines the link.

The regions in a map include

shape descriptions (rectangle, circle, polygon, or background)
numeric data -- coordinates -- defining the coverage of the regions within the image, and
address (URL) links.

Maps may also include a layer order defining which regions take precedence when overlap occurs. Regions can be defined without links. When a region without a link overlaps other regions it has precedence over, the region is subtracted from the other regions.

HTML Host Entry
Image maps are placed in a Web page using a one of several attributes of the
<A HREF=" "> and <IMG> HTML tags. The following HTML markup produces the "clickable" imagemap below:

<A HREF="HTTP://www.mccsc.edu/cgi-bin/imagemap /imagemaps/schlfile.map">
<IMG SRC="http://www.mccsc.edu/images/schools.gif" ISMAP BORDER=1 ALT=[MCCSC imagemap Schools]></A>

The Image (schools.gif)

Up to...the TOP

cgi-bin/imagemap
-- is the address of the MCCSC/Monon cgi-bin directory and the cgi file, imagemap (which you use but which you never see or touch).
imagemaps/schlfile.map
-- is the directory (imagemaps) on your webspace which contains the textfile (schlfile.map) of map data.
images/schools.gif
-- is the location of the image file.
ISMAP -- is an <IMG...> attribute which identifies the image as a MAP.

The HTML Host Entry for your imagemap would probably look something like this:

<A HREF="HTTP://www.mccsc.edu/cgi-bin/imagemap/~yourname/location-and-name-of- your-data-file">
<IMG SRC="http://www.mccsc.edu/~yourname/location-and-name-of-your-gif-map" ISMAP BORDER=1 ALT=[the text description]></A>

Map Data Set

The following is the contents of schlfile.map. Your mapfile.map will include different coordinates and shapes:

default http://www.mccsc.edu/mccscsch.html

rect http://www.mccsc.edu/ 197,12,310,54
rect http://www.arlington.mccsc.edu/ 127,128,140,135
rect http://www.binford.mccsc.edu/ 174,178,182,185
rect http://www.broadview.mccsc.edu/ 127,197,139,204
rect http://www.childs.mccsc.edu/ 164,200,177,207
rect http://www.clearcreek.mccsc.edu/ 125,219,139,226
rect http://www.fairview.mccsc.edu/ 128,152,139,158
rect http://www.grandview.mccsc.edu/ 101,214,114,221
rect http://www.highland.mccsc.edu/ 42,187,55,194
rect http://www.lakeview.mccsc.edu/ 165,300,185,319
rect http://www.marlin.mccsc.edu/ 193,98,207,105
rect http://www.mccsc.edu/rogers 155,178,168,185
rect http://www.templeton.mccsc.edu/ 148,187,160,194
rect http://www.university.mccsc.edu/ 189,135,202,142
rect http://www.unionville.mccsc.edu/ 307,108,321,115
rect http://www.batchelor.mccsc.edu/ 127,208,139,215
rect http://www.mccsc.edu/jackson/ 180,209,237,250
rect http://www.tri-north.mccsc.edu/ 126,141,139,148
rect http://www.mccsc.edu/alternative/ 98,141,120,151
rect http://www.north.mccsc.edu/ 128,116,141,123
rect http://www.south.mccsc.edu/ 145,199,157,206
rect http://www.hhills.mccsc.edu/ 145,90,162,105
rect http://www.ivy.bloomington.in.us/ 117,103,132,112
rect http://www.indiana.edu/ 165,148,178,155
rect http://www.mccsc.edu/admin.html 97,175,116,188

rect indicates the shape is a rectangle. 97,175 identifies the coordinates of top left corner of the rectangle; 116,188 identifies the bottom right corner. 97,175,116,188 is the active rectangle which will link to the URL http://www.mccsc.edu/admin.html

The coordinates were identifed using Paint Shop Pro. Other graphics or paint programs will also identify the coordinate points of an image.

Shapes and Shape Rules

Shape term URL x=across
y=down coordinate point(s)
Default default URL address of image
Rectangle rect URL x,y,x,y top left pair, bottom right pair
Circle circle URL x,y (radius) center point, point on radius
Polygon poly URL x1,y1,...,xN,yN each corner
Point point URL x,y the single point

Shape	term	URL	x=across y=down	coordinate point(s)
Default	default	URL		address of image
Rectangle	rect	URL	x,y,x,y	top left pair, bottom right pair
Circle	circle	URL	x,y (radius)	center point, point on radius
Polygon	poly	URL	x1,y1,...,xN,yN	each corner
Point	point	URL	x,y	the single point

Back to...TOP Back to...Designing Web Pages

Last modified: 22 February 1998
Comments and/or Questions? Carl Zager: czager@mccsc.edu