What is an Imagemap, anyway? Basic Imagemap Construction Other Imagemap References
Imagemap Construction With Map This
What is an Imagemap, anyway?
Basic Imagemap Construction
Other Imagemap References
An imagemap is an image that has had certain areas of the image "mapped" as hyperlinks to other pages (or ../images). This technique is used often for "real" maps of cities, states, or campuses on the Web. The mapping is accomplished by associating actual coordinates of the image to specific pages.
There are two types of image maps -- client-side and server-side. Server-side imagemaps (which are older and supported by more browsers) send the image coordinates to the web server, where they are interpreted, and the resulting page is sent back. Because the interpretation takes place on the server side, a script is required on the server to interpret the coordinates. Client-side imagemaps interpret the coordinates and send the web server the request for the page, so no script is required on the server. With a client-side imagemap, the coordinates and the URLs they reference are stored within the html code for that page.
Map This is a tool where you can construct both client-side and server-side imagemaps. To begin constructing an imagemap using Map This, you must start with both the basic image and the html page where it is used.
Load the image into Map This.
Using the toolbar that appears at the
top of your
image, select the
rectangular, circular, or polygon-shaped button in order to
designate
an area used to reference a particular URL. These options are also
found under the Mapping option on the main toolbar. This is a
click-and-drag action.
The Zoom function, found under the View option, is quite useful for specifying a small area. You can zoom in, zoom out, or zoom to a particular proportion of the original image. You can also zoom in and out by clicking on the magnifying glass button on the smaller toolbar directly above the image.
Right click on the portion of the
image that has been selected.
Choose the MapInfo option. Define a default URL. This is the URL
that
will be referenced if any portion of the imagemap other than the
specifically referenced areas is chosen. A default URL must be specified
on any imagemap.
Click on the arrow button to select the
specified
area. Click inside the specified area -- the cursor should look like
cross-hashes. After clicking in the specified area, the pencil
button
on
the small toolbar should be activated. Click on this button or choose
Edit Area Info under the Edit option.
At this point, you will be prompted to
specify the
URL that you want this area to reference. You will
also be given the coordinates of the specified area.
Save this new image as a .map
file.
FTP this and the original image onto the
server.
You will usually save into your public_html directory on ruby or into
/usr/local/http/htdocs
-- whichever you happen to be using. It is easiest to save both ../images
into the same directory. Be sure and change the permissions on both
saved ../images to read/write/execute capabilities.
When writing the imagemap into your html
document,
the tags must be in the following form:
<a href="/cgi-bin/imagemap/URL_reference.map"><img src="original_image.gif" ISMAP></a>
In this case, "URL_reference.map" is the version of the image where you referenced the URLs. It is necessary to specify the full path name of the .map image. "Original_image.gif" is the original image with no URLs referenced from it.
You can put as many links on the same
.map
file as you want.
Example Imagemap Courtesy of UNC Homepage