Client-Side Image Maps
Having chosen a suitable image, you need to display the graphic on the screen and tell the browser that it is an image map. To do this you use the <img> element with the usemap attribute. You then need to write a map file. A map file tells the browser which areas of the image lead to which destination. Map files can be written in any text editor and can be included at the end of the <body> section of an HTML document (my prefered method) or as a separate file, often in the same location as the graphic.
The following example of an image map lets you jump to a search engine of your choice and will be explained afterwards, so don't use it yet!
The code to display this particular image map is:
<IMG BORDER=0 SRC="../graphics/engines2.jpg" USEMAP="#engines2">
The usemap attribute contains the location of the map file and uses the same syntax as the href attribute of the <a> element. In this case the corresponding map file, engines2, is contained within the HTML document and a # is used to indicate a local file. If the map was contained separately in a graphics directory, the usemap attribute could read usemap="graphics/engines2.map".
The map file, engines2, is:
<map name="engines2">
<area shape="rect" coords="2,3,86,30" href="http://www.yahoo.com/">
<area shape="rect" coords="94,3,227,30" href="http://inktomi.berkeley.edu/query.html">
<area shape="polygon" coords="273,0,252,3,245,11,231,25,235,29,260,24,267,26,265,35,293,35,288,13" href="../setup/welcome.htm">
<area shape="default" nohref>
The elements of a map file are explained below:
name="text"
Provides a unique name for the image map file, as referenced by theusemapattribute of the<img>tag displaying the image map.shape="rect | circle | poly | default"
Defines the shape of the live area as a rectangle, circle, polygon or the remaining undefined image. All but the latter require thecoordsattribute.coords="x1,y1,x2,y2 | x,y,r | x1,y1,x2,y2,x3,y3..."
Defines the precise position of the live area using coordinates in pixels separated by commas. A rectangle is described by coordinates of the top-left and bottom-right corners of the rectangle. A circular area is described by coordinates of its centre followed by its radius. A polygon is defined by coordinates of all the corners of the polygon. In the example, a ten-sided shape was used to approximate the duck's head. The coords attribute is required for theshapeattribute, except when it is set to default.nohref
Used to specify an area as not live. The example uses this attribute to define the area outside those specified to have no function.
<map></map>
Defines a map file. Must be used with the name attribute.
<area>
Used to define part of an image as a live area. An arbitrary number of <area> tags may be specified. If two areas intersect, the one which appears first in the map definition takes
precedence in the overlapping region.
There are a couple of ways to find coordinates of areas on your image. First of all, you could set the graphic as an image map as decribed above, but use the Having chosen a suitable image you need to display the graphic on the screen and tell the browser that it is an image map. To do this you use the The code to display the image map is:
The corresponding map file,
Map files can be written in any any text editor and are often included in the same location as the graphic. By way of explanation, the file after There are a couple of ways to find coordinates of areas on your image. First of all, you could set the graphic as an image map, as decribed above, and load it into your browser. Move the mouse cursor over the image map and coordinates should be displayed at the bottom of your browser window (at least they are in Netscape). Simply jot down the coordinates corresponding to your hot area and type them into your map file.
This procedure can also be performed using a graphics package such as the excellent Paintshop Pro.
For a little more help on image maps, try the CIX tutorial.
ismap (see server-side) attribute instead of usemap. Load it into your browser; move the mouse cursor over the image map and coordinates should be displayed at the bottom of your browser window (at least they are in Netscape). Simply jot down the coordinates corresponding to your hot area and type them into your map file. This procedure can also be performed using a graphics package such as the excellent Paintshop Pro. Client-side image maps can be automatically generated using the wonderfully simple MapEdit.
Server-Side Image Maps
Server-Side Image Maps are quite easy to set up, but require your access provider to have the relevent processing script.
<img> element with the ismap attribute. You then need to place the image within a link to the relevent .map file. A map file tells the browser which areas of the image lead to which destination. The following example of an image map lets you jump to a search engine of your choice and will be explained afterwards, so don't use it yet!
<a href="graphics/engines2.map">
<img width=294 height=36 border=off ISMAP src="graphics/engines2.jpg"></A>engines2.map, is:
default special.htm
rect http://www.yahoo.com/ 1,1 85,26
rect http://inktomi.berkeley.edu/query.html 98,4 218,24
rect http://www.compulink.co.uk/~woodhill/setup/gateway.htm 230,1 287,33default is the file the user is directed to if he/she clicks outside one of the specified areas. The text after rect (rectangle) contains the URL of the destination file followed by coordinates in pixels of the top-left and bottom-right corners of the relevent rectangular area on the image map.