[SFF Net Logo]
[ -,-'-{@  ] In Memoriam
Susan Caspar
Bill Paxton
Home •  WebNews •  WebMail •  People Pages • Member Services 
    Your SFF Net Web Page

Choose a help topic from this list:
(or use the Master Help Index)

   Test your network connection
   Software Setup Instructions
   New to SFF Net?
   Your SFF Net Account


   About the Newsgroups
   Using WebNews


   About SFF Net Email
   Using WebMail

   People Pages & Hosted Domains

   Your SFF Net People Page
   Your People Newsgroup
   Blogging Tools
   Hosted Domains

Need more help? Click Here



How to Work with Page Elements

How to Work with Image Maps
There are two different ways to make image maps out of graphic images. They're known as server-side or client-side image maps. Server-side image maps use an ISMAP tag in the HTML and need two files -- the map file and the image file. Client-side image maps embed the map in the main HTML page.

Each method has advantages and disadvantages:

Works with any browser
Faster (less code to download)
Requires special image map editing software to create the maps
Doesn't require any special software to create the map
Simple to use
Only works with client-side capable browsers
Must download the entire image map description across slow link

The following instructions detail creating server-side image maps. Instructions on creating client-side image maps can be found at any online HTML tutor site (do a search for +html +tutor +"image map" on http://www.google.com to find several dozen good sites.

A Couple of Sample Image Maps

Shapes To test the image map on the left, click on the blue rectangle, the red circle, the black triangle, or the green rectangle. The green rectangle is linked to SFF Net's standard Feedback form; the others are linked to dummy HTML pages. If you click on the white portion, you invoke the "default" HTML page.

Unicorn The unicorn has two irregular areas defined -- the tail and the horn. Clicking anywhere else brings up the default for that image.

How it Works

The image in an image map is just a .GIF or .JPG, like any other. But it's mapped--that is, coordinates on the image correspond to various actions you want the browser to take when the user clicks on it. Usually, the action is a jump to another page, much like including an <a href>.

Here's the basic syntax:

<a href="image.map"><img src="image.gif" ISMAP></a>

The "ISMAP" tag is what turns on the magic.

What You Need

To implement an image map here on SFF Net, you'll need
  1. A image file (.gif or .jpg)
  2. A tool for creating imagemap files (must be NCSA format)
  3. Some patience

The maps the for the two samples above were created using MapEdit, a shareware program. You can download the MapEdit zip file from here. MapEdit may not be the best program available; it was merely the first of several dozen which showed up when I did a search, and it worked. Versions of MapEdit are available for Windows, Macintosh, and Unix. Make sure that whatever tool you select can generate NCSA-format imagemap files.

  • Other Imagemap tools available at Yahoo.

What the Tool Does

The imagemap file-creating tool, whichever one you use, makes a file with various entries in it. The first entry is usually the default--where to go if the user clicks somewhere other than your carefully planned clickable areas. For example:

default /people/jeffryd/index.html

Remaining lines in the file delineate areas (sometimes called "hotspots") on the image for which you want something to happen. Here's the complete imagemap file used for the geometric shape sample above:

default /help/webpages/imagemap_white.html
rect /help/webpages/imagemap_blue.html 20,21 77,102
circle /help/webpages/imagemap_red.html 111,91 111,113
rect /member/feedback.asp 22,137 133,226
poly /help/webpages/imagemap_black.html 90,22 134,22 134,22 134,68 134,68 90,22
Here are the .map file entries for the unicorn sample:
default /help/webpages/imagemap_nobody.html
poly /help/webpages/imagemap_horn.html 156,27 165,41 205,14 193,3 156,27 160,33 157,30 157,30 168,19 192,4
poly /help/webpages/imagemap_tail.html 58,148 14,200 10,232 10,245 7,250 13,252 17,249 27,239 26,233 37,215 51,197 55,189 60,178 62,167 67,154 66,148 60,146 57,147 49,158
As you can see, there are three possibilities--rect, circle, and poly. Imagemaps are measured in pixels. A rectangle has an upper-left corner and a lower-right corner, expressed as (x1,y1) (x2,y2). A circle has a center point and a radius, expressed as (x,y) r. A polygon is expressed as a series of points describing an irregular area.

Previous Page
Next Page


      Home •  Help •  Search •  Contact Us

Copyright © 1996-2017 SFF Net(tm)  All Rights Reserved
We welcome your Feedback at any time.