142 Chapter 8 – Creating LinksImagemaps
Web Design in a Nutshell, eMatter EditionSample map definition file (.map) fileExample 8-2 shows a server-side image map (called spacey.map) for the
imagemapped graphic shown in Figure 8-2. Let’s look at its component parts:The HTML documentWithin the HTML file, the image is treated as shown here:
<HTML>
<HEAD><TITLE>Server-side Sample</TITLE></HEAD>
<BODY>
<A HREF="/cgi-bin/imagemap/spacey.map">
<IMG SRC="orbit.gif" ISMAP></A>
</BODY>
</HTML>
The anchor tag links the whole graphic to the map definition file (spacey.map)
which is located within thecgi-bindirectory on the server. This is a typical config-
uration; however, you should follow your server administrator’s instructions.
Theismapattribute within the image tag tells the browser that the graphic is an
imagemap.When Not to Use Imagemaps
Imagemaps are not always the best solution and are actually waning somewhat in
popularity as web design evolves. Slicing up a large image and holding the pieces
together with a table often offers functionality that an imagemap can’t match. This
technique is so popular that it is built into web graphics tools such as Macro-Example 8-2: Server-Side Image Map
A default index.html
B rect http://www.lunch.com/orbit/ 203,23 285,106
circle mypage.html 372,64 412,104
poly yourpage.html 99,47 105,41 94,39 98,34 110,35 115,28 120,35
133,38 133,42 124,42 134,58 146,56 157,58 162,63 158,67 141,68
145,72 155,73 158,75 159,80 148,83 141,83 113,103 87,83 72,83
64,80 64,76 68,73 77,72 79,63 70,59 67,53 68,47 78,45 89,45 99,47A This establishes the default URL, whish is what the browser will display if the
user clicks outside one of the clickable areas. Set this to the current document
if you want the impression that the click has no effect.
B Each hot area in the image is defined by a shape name (rect,circle,poly),
a URL, and a set of pixel coordinates. The syntax for the coordinates varies by
shape and is generally the same as explained for client-side imagemaps above.
The syntax for some shapes may vary from server to server. In this .map file,
the coordinates are defined for use by an NCSA server. Note that the coordi-
nates defining the circle are different than in the client-side example. NCSA’s
syntax for defining a circle is “x1,y1,x2,y2,” which corresponds to the x,y
coordinates of the circle’s center point followed by the x,y coordinates for the
bottom-right point of the square that would enclose the circle.