WWW FAQ: How do I set up a clickable image map?

How do I set up a clickable image map?

There are really two issues here: how to indicate in HTML that you want an image to be clickable, and how to configure your server to do something with the clicks returned by Netscape, Mosaic, and other clients capable of delivering them. Client side imagemaps, a new feature of Spyglass Mosaic, Microsoft Internet Explorer and Netscape (2.0 and beyond), change this picture by allowing imagemaps to be created as part of an HTML document without the need for special server software.

One of the best resources available on the subject is the Imagemap Help Page <URL:http://www.hway.net/ihip/>, maintained by Steve Rogers.

You can read also about image maps and the NCSA server at <URL:http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html> ). Also see Joseph Walker's collection of imagemap resources (URL is <URL:http://www2.ncsu.edu/bae/people/faculty/walker/hotlist/imagemap.html > ).

Using imagemaps requires that you create a map file; you can do this by hand or with a WYSIWYG tool.

VERY IMPORTANT: Creating server-side imagemaps, which all web browsers understand, requires a real web server (not an FTP server) and a cooperative web server administrator. It is not usually as simple as wrapping a link around an IMG SRC tag and adding the ISMAP directive; the server must also be told about the map file, and the way to accomplish this varies from server to server. So read your server documentation, and don't waste time making maps before making sure you have the necessary tools to deliver them.

What about "client-side" imagemaps?

Several of the newer browsers, notably Microsoft Internet Explorer, Spyglass Mosaic and Netscape 2.0 and later, support "client-side" imagemaps. This is a Good Thing, because the imagemap is part of the HTML page and a server need not be involved. However, keep in mind that not every user has a browser that supports such imagemaps. Client-side imagemaps can be used side by side with old-fashioned server-side imagemaps,which are used if the browser does not understand the newer type. Many of the imagemap editors listed below support the creation of both types of maps.

Programs to Edit Imagemaps

The author's Mapedit (URL is <URL:http://www.boutell.com/mapedit/> ) is a straightforward WYSIWYG imagemap editing tool for both Microsoft Windows and the X Window System. Versions 2.0 and later support client-side imagemaps, will open GIF, JPEG and PNG-format images, and offer new editing controls. Mapedit makes it particularly easy to create client-side imagemaps by opening existing HTML documents directly. Shareware.
Map This (URL is: http://galadriel.ecaetc.ohio-state.edu/tc/mt) is a feature-laden WYSIWYG imagemap editing tool for Microsoft Windows 32-bit environments (Win32s, Windows 95 or Windows NT required; Win32s is available from Microsoft's FTP site, ftp.microsoft.com, among other places). Supports both client-side and server-side imagemaps. Free.
Web Hotspots
Web Hotspots (URL is <URL:http://www.hooked.net/users/1auto> ) is a feature-rich imagemap editor for all Windows sytems, supporting zoom, advanced shape manipulation, and multiple-document interface. The latest version has support for client-side imagemaps, subtracting interior regions from hotspots, live testing if you are connected to the net, and other high-end features. Shareware.
Another WYSIWYG imagemap editor for Windows. Features permanent associations between images and map files for convenient reopening and manipulation of existing shapes. The capability to merge data from multiple MAPs is also provided. See <URL:http://www.tikipub.com/jc/> for more information.
For users of John Bradley's xv image display software for the X Window System, Mapmaker can turn the miniature images created by xv's Visual Schnauzer into an imagemap. This is useful if you would like to make an entire directory of images available (but note that you should also make textual links to allow those with text- based browsers to download the images for external viewing). (URL is: http://icg.stwing.upenn.edu:80/~mengwong/mapmaker.html )
On the Macintosh, you may want to use MacMapMaker <URL:ftp://ftp.uwtc.washington.edu/pub/Mac/Network/WWW>. MacMapMaker produces both NCSA and CERN-compatible maps, which can also be used with MacImagemap and a Macintosh-based server (MacImagemap is found in the same directory).

The original macintosh Imagemap editor. <URL:http://www.city.net/cnx/software/webmap.html>
For Unix systems and other systems on which the Tk/Tcl language toolkit has been installed, Tkmapedit provides a WYSIWYG imagemap editor which is capable of directly testing links if the tkWWW web browser is available. Available by anonymous FTP from the TCL archive on ftp.aud.alcatel.com.
For Unix systems, glorglox is a unique imagemapping tool which allows color indexes in GIF images to be associated with URLs. It's easier to use this than to describe it (or pronounce it), so check out the glorglox home page (URL is <URL:http://www.uunet.ca/~tomr/glorglox/> ).

World Wide Web FAQ