HTML/WWW Wkshop: Adv HTML-ImageMaps

Advanced HTML: ImageMaps

There are two ways of making ImageMaps (clickable images): server-side ImageMaps and client-side maps---because the former require more messing around with the server that is serving the Web document, we only treat the latter here.

Client-Side ImageMaps
In a client-side map, the browser decides what to do when a user clicks on some part of the map. To tag such a map, the image tag must include both "ismap" and "usemap" attributes, and a map must be defined elsewhere with the <map> tag.

Example:
<img src="images/bar.gif" ismap usemap="#barmap" border=0 alt="two-color bar"> <map name=barmap> <area coords="0,0,82,15" shape=rect href="index.html"> <area coords="82,0,157,29" shape=rect href="feedback.html"> </map>

The img tag defines the image that is to be the map, and the map tag encloses the definitions of the different hot spots of the map. In this case, I know that the image is 157x29 pixels large, split into two pieces about 79x15 pixels in size. The map therefore defines one rectangular area from the pixel (0,0) (the upper left side of the picture) to (82,29) (the bottom of the bar, at the middle horizontally) which is linked to the file index.html, and a second rectangular area from (82,0) (the center of the image, at the top) to (157,29) (the bottom right corner) that links to the file feedback.html.
Shapes that may defined in an area tag include:

area tag shape coords href

<area shape=rect coords="x1,y1,x2,y2" href="URL">

(coordinates are top left & bottom left corners of rectangle)

<area shape=circ coords="x1,y1,r" href="URL">

(coordinates are center (x1,y1) and radius (r) of circle)

<area shape=poly coords="x1,y1,x2,y2,x3,y3..." href="URL">

(coordinates are successive vertices of the polygon)

[advhtml] [colors] [reuse] [valid] [images] [objects] [imaps] [tables] [frames] [forms]

[title] [objectives] [www uses] [the works] [basic html]
[adv html] [editors] [resources] [feedback]

last modified (( Jun 17 07:47:04 1997 ))
HTML/WWW Wkshop: Adv HTML-ImageMaps
©1997 Gavin LaRose
Comments to: glarose@NebrWesleyan.edu

area tag	shape	coords	href
`<area`	`shape=rect`	`coords="x1,y1,x2,y2"`	`href="URL">`
	(coordinates are top left & bottom left corners of rectangle)
`<area`	`shape=circ`	`coords="x1,y1,r"`	`href="URL">`
	(coordinates are center (x1,y1) and radius (r) of circle)
`<area`	`shape=poly`	`coords="x1,y1,x2,y2,x3,y3..."`	`href="URL">`
	(coordinates are successive vertices of the polygon)

`[title]`	`[objectives]`	`[www uses]`	`[the works]`	`[basic html]`
`[adv html]`	`[editors]`	`[resources]`		`[feedback]`