rev1.10-081997

Online IMAGE MAP Tutorial

Welcome to the image-map online tutorial. In this tutorial you will learn how to make your GIF and JPG images contain clickable regions.

Adding image maps to your web site is a terrific way to build menu bars and clickable images that keep your web visitors interested. View the online tutorial and think about how you could spruce up your own site. Enjoy!




PlanetWide v1.10 supports the following NCSA regions:

The clickable regions are outlined at the bottom of this document.

It is necessary that you create a reference file containing each clickable region for your image map. This can be done with any NCSA compliant image-map builder or simply with your web client.

We will outline a method using Netscape Navigator tm for OS/2 to read the regions, as it will echo our mouse locations at the bottom of the web navigation screen. The IBM WebExplorertm does not support this feature.




Build *.MAP and Link Image file:

We are going to create a clickable image map for a user named BOB, who has a home page directory located at x:\webserv\bob.




Now we must include the image in Bobs html page. This is important because we want to use the raw image to define the clickable regions, and the end-users will also need to see the image. Add an ANCHOR BLOCK and IMG tag to the index.htm to make the image active. Eliminating two steps at once, like this:

Take a moment and think of a *.MAP filename, and the name of your clickable image. Also, you will need to know your system IP address or Domain name.

Image filename: pwlogo.jpg
Map filename: bob.map
Server name: http://www.myserver.ca
User Directory:/bob


We developed the following lines from the above information. Now add them to Bobs index.htm file:

  < A HREF="http://myserver.ca/cgi-bin/imagemap/bob/bob.map" > 
< IMG SRC="/bob/pwlogo.jpg" ISMAP >
< /A >
(Note: the keyword ISMAP must be included in the < IMG > tag to inform the web client to return the image mouse co-ordinates.)

Save the index.htm file after making the changes, then move on to the next step; defining the clickable regions!





Touch the image on your screen with the mouse(Don't click on it, nothing will happen if you do). Netscape Navigator displays your mouse co-ordinates as your mouse pointer touches the image. These co-ordinates will be included in your BOB.MAP file.

use graphics to view
Bobs source JPG image: pwlogo.jpg




## ENTRY #1: Link PlanetWide text:

Link the "PLANETWIDE" text to the PlanetWide home page.
Use the RECT(rectangle) region.
URL=http://www.pr.uoguelph.ca/cpayne/planet.htm

Touch the top-left corner of the word "PlanetWide" on the image with your mouse pointer.
TOP-LEFT(x,y)=(24,25) approx.

Touch the bottom-right corner of the word "PlanetWide" on the image with your mouse pointer.
BOTTOM-RIGHT(x,y)=(295,52) approx.


Now add the link commands to your BOB.MAP file: [ ACTION URL (x,y) (x,y) ]

 RECT http://www.pr.uoguelph.ca/cpayne/planet.htm 24,25 295,52
   




## ENTRY #2: Link Glass Sphere:

Link the upper red glass spheres to the PlanetWide download page.
Use the CIRCLE region.
URL=http://www.pr.uoguelph.ca/cpayne/pwdownload.htm.

Touch the center-point of the upper red sphere with your mouse pointer.
CENTER-POINT(x,y)=(183,95) approx.

Touch the right-edge of the upper red sphere with your mouse pointer.
EDGE-POINT(x,y)=(211,95) approx.


Now add the link commands to your BOB.MAP file: [ ACTION URL (x,y) (x,y) ]

 CIRCLE http://www.pr.uoguelph.ca/cpayne/pwdownload.htm 183,95 211,95
   




## ENTRY #3: Link Undefined Areas:

Link any undefined areas of the image map to Bob's homepage using the DEFAULT region. URL=http://www.myserver.ca/bob/index.htm.

Add the default link commands to your BOB.MAP file: [ ACTION URL ]


 DEFAULT http://www.myserver.ca/bob/index.htm
   




The completed BOB.MAP file should resemble the following:

start of file.

 ## link to the PlanetWide homepage ##
 RECT http://www.pr.uoguelph.ca/cpayne/planet.htm 24,25 295,52
## link to the PlanetWide download page ## CIRCLE http://www.pr.uoguelph.ca/cpayne/pwdownload.htm 183,95 211,95
## link to Bobs homepage ## DEFAULT http://www.myserver.ca/bob/index.htm
end of file.




We hope that this outline will help you to create useful clickable image-maps on your web site. Happy clicking!




IMAGE-MAP REGIONS:


© copyright 1997 Payne-Mennie Computing Services. All rights reserved.