Other Connections Resources
Web Directories and Search Engines
On-Line Newspapers and other News Sources
Resources for Writing Instructors
Scholarship on Hypertext and Computer-Assisted Pedagogy
English Home Page
Allyn & Bacon Home Page
ab_webmaster@abacon.com
©1997 Allyn & Bacon
Imagemaps are single images (generally images with multiple objects in them) that are "mapped" so that a reader can go to different pages by clicking on different sections of the image. If you can find an image that will provide a suitable metaphor for your site and that has enough elements to represent multiple nodes, you can incorporate a tremendous amount of information into a visually dramatic presentation. Imagemaps
There are many shareware applications and WYSIWYG editors that will help you build imagemaps. Using these applications, you can set coordinates for images and specify a URL for each "hot spot." The process of creating the map will vary from application to application, but the basic HTML should be the same. The mapping application will generate a text file which includes the image coordinates and their corresponding URLs. (You can also determine the coordinates of your hot spots by using a graphics editor.) Don't be afraid if this looks like a Dow Jones stock update with numbers scrolling across the page. All you need to do is place these coordinates into your HTML document inside a <MAP></MAP> tag. You'll also need to include some additional information in the <IMG SRC> command, which tells the browser where to find the map coordinates. The HTML coding for an imagemap named "campus.jpg" would look something like this:
<IMG SRC="campus.jpg" USEMAP=#campusmap>
<MAP NAME="campusmap">
<AREA SHAPE="RECT" COORDS="15,25,40,55" HREF="english.html">
<AREA SHAPE="RECT" COORDS="136,78,98,116" HREF="math.html">
<AREA SHAPE="RECT" COORDS="12,52,76,24" HREF="physics.html">
<AREA SHAPE="RECT" COORDS="90,85,35,11" HREF="socio.html">
</MAP>
In this case, we use <MAP NAME="campusmap"> to denote the document section where the map coordinates are stored. By including the tag "USEMAP=#campusmap" within the <IMG SRC> command, we tell the browser that the graphic file "campus.jpg" is an imagemap and that its coordinates are specified in the "campusmap" section. When a reader clicks on part of the image, the browser will know to look for the coordinates within the <MAP NAME="campusmap"></MAP> command and will load the specified page.