Overview of Clickable Images
This page is part of the WebCom Web Publishing Guide. It provides a brief explanation of what a clickable image (or "imagemap") is, and how it works. For examples and a template of the HTML code used to produce an imagemap, see the Syntax page.Clickable images are created by associating areas of a normal image with a URL. When a user clicks on the image, the file pointed to by the URL associated with the area selected is automatically transferred to their computer (in most cases, the file is another Web page). This is called an "imagemap", because areas on the image are "mapped" to URLs.
An image is made "clickable" by two things: inserting a special tag (ISMAP) at the end of a IMG SRC tag (which displays the image pointed to within a HTML document), and placing this tag inside a hotlink pointing to a file that contains a list of URLs associated with (or "mapped" to) areas on the image. This file is called the "map" file.
When the image is clicked, the Web browser returns the location of the click to the Web server. The server looks in the "map" file, and returns the URL associated with the area clicked on to the browser, which then retrieves the file the returned URL points to.
If the user clicks on a point in the image not explicitly associated with a URL, then the "default" URL is returned. A simple button can thus be created by including only a default URL in the map file, as in the example below:
A Clickable Button
Clicking on this "button" will cause the WebCom Home Page page to be loaded into your Web browser.
<A HREF="http://webcom.com/~webcom/html/tutor/demo.map"><IMG SRC="http://webcom.com/~webcom/images/webcom.gif" ISMAP></A>
This is the map file for the "button". It contains a single URL preceeded by the "default" instruction, which tells the server that if it can't find any URL associated with the area clicked on, to return the default.
default http://webcom.com/~webcom/