A Complete Guide to Web Design

(やまだぃちぅ) #1
Imagemaps 141

Creating Links

Imagemaps

Web Design in a Nutshell, eMatter Edition

Server-Side Imagemaps


Server-side imagemaps will work with all browsers, but they are a bit more
involved to create. In addition, they rely on the server, which makes them less
portable than their client-side counterparts and increases the load on the server.


Server-side imagemaps have four elements:



  • An ordinary graphic file (.gif,.jpeg, or.png)

  • HTML tags in the document: the ISMAP attribute within the graphic’s
    tag and an anchor tag that links the graphic to the.map file on the server

  • A map definition file (.map) containing the pixel coordinate and URL informa-
    tion for each clickable area; the.mapfile resides on the server and the for-
    mat is server-dependent

  • A CGI script that runs on the server (or a built-in function of the server soft-
    ware) that interprets the.mapfile and sends the correct URL to the HTTP
    server


Because server-side imagemaps are so dependent on the configuration of the
server, you need to coordinate with your server administrator if you plan on
implementing them. You’ll need to find out which flavor of.mapfile to create
(NCSA or CERN) as well as the pathname to which the imagemapped graphic
should be linked (this usually includes acgi-bin directory).


D This is the area tag for the irregular (polygon) shape on the left of the image
in Figure 8-2. For polygons, the coordinates are pairs of x,y coordinates for
each point or vertex along the path that surrounds the area
(coords=x1,y1,x2,y2,x3,y3...). At least three pairs are required to define
a triangle; complex polygons generate a long list of coordinates.
E The USEMAP attribute is required within the image tag to indicate that this
graphic is an imagemap that uses the named “spacey.”


Figure 8-2: Imagemapped graphic


Example 8-1: HTML for Client-Side Image Map (continued)


yourpage.html http://www.lunch.com/orbit mypage.html

orbit.gif
Free download pdf