(or use the Master Help Index)
FAQs
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
About the Chatrooms
Using WebChat
Your SFF Net People Page
Your People Newsgroup
Blogging Tools
Hosted Domains
How to Work with Page Elements
How to Work with Image Maps
Each method has advantages and disadvantages:
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.
Here's the basic syntax:
The "ISMAP" tag is what turns on the magic.
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.
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:
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.
Method
Pros
Cons
Server-Side
Works with any browser
Faster (less code to download)
Requires special image map editing software to create the maps
Client-Side
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 linkA Couple of Sample Image Maps
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.
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>.
<a href="image.map"><img src="image.gif" ISMAP></a>
What You Need
To implement an image map here on SFF Net, you'll need
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 /help/webpages/imagemap_white.html
Here are the .map file entries for the unicorn sample:
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
default /help/webpages/imagemap_nobody.html
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.
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