Image Map Tutorial
Image Maps are a way to create images which have multiple links embedded within them. For instance an image with a map of the United States could be configured so that each state when clicked would link to a web page describing that individual state. Image Maps were once a very efficient way to accomplish this behavior. Today Image Maps are rarely used as other technologies have made the same behavior easier to achieve.
- Image Map Tutorial - A Tutorial from NCSA
- Apollo Image Map - An example of the usefulness of Image Map functionality.
- Image Map Examples - From Illinois Center for Information Technology
- Objects & Images - Image Information from the W3C
Originally to achieve the behavior of an image map web masters simply made several images, used table to arrange them, and made each image a link. This was time consuming; a single map had to be cut into several image and manually arranged using HTML code to appear as one image. Early image maps used server side code to get the coordinates of the mouse when a user clicked an image. Based on these coordinates a script or program would redirect the user to a different page. In HTML 3.0 the Map tag made it possible to do this all within the browser without having to enable any server side scripting.
- HTML Proposals - Includes Proposal for Image Map tags by the HTML Working Group
- HTML Interfaces & Links - From Hypertext Research
- Web Standards - A Guide for Accessibility with Image Maps & Other HTML tags
- Accessibility Policies - Why Client Side Image Maps can Make Pages more Accessible.
Types & Code
Server side Image maps vary from server to server. Essentially all work the same however; they send the coordinates of the mouse when a user clicks an image to the server. The server then runs a program or script and sends a header redirect to the browser telling it to open a different page. To do this server side image maps use an ISMAP tag within the image source tag. The HTML Map tag allows for browser only, client side, image maps. To accomplish this a 'usemap' tag is added to the image source tag with the name of a specific map to use. Then a separate map tag is created which is named with the name specified in the usemap. This contains a list of coordinates and links so the browser knows where to link. Coordinates that are not specified do not link to anything.
- Image Maps - Client & Server Examples
- Accessibility & Usability - Includes Client & Server Image Map Documentation
- Server Side Image Maps - How to use CGI to create Image Maps
- Hyperlinks & Navigation - Ensuring Accessibility with Image Maps
- Image Map Exercises - Ways to create Image Maps
- Client Side Image Maps - A Reference Guide
Automatically Generating Image Maps
The easiest way to generate a client side image map is to use a professional Web Design program. Adobe GoLive, Adobe Dreamweaver, and Microsoft Front Page all feature tools to accomplish this. Further numerous web sites have utilities that allow you to upload an image and create the code for an image map without having to enter coordinates by hand.
- Creating Image Maps - A Guide for Front Page users
- Image Maps in Dreamweaver MX - A Guide for Beginners
- How Do I Setup an Image Map - Includes Several Free Resources for Automatically Generating Image Maps
- Create & Upload Image Maps - A Guide to Image Map Generation
- Dreamweaver Image Maps - A visual Guide
- WebGraphics - Includes Image Map Alternatives
- Flash Content - Includes Overview of Using Flash to Emulate Image Maps
- Creating Image Maps with Invisible Buttons - A Guide for Flash users
- Introduction to Slices - Another Alternative to Using Image Maps