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.
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
< A HREF="http://myserver.ca/cgi-bin/imagemap/bob/bob.map" >
(Note: the keyword ISMAP must be included in the < IMG > tag to inform
the web client to return the image mouse co-ordinates.)
< IMG SRC="/bob/pwlogo.jpg" ISMAP >
< /A >
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.
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
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
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,52end of file.
## 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
We hope that this outline will help you to create useful clickable image-maps on your web site. Happy clicking!
CIRCLE http://www.myserver.ca/bob/index.htm 50,25 75,25
DEFAULT http://www.myserver.ca/bob/index.htm
POLY http://www.myserver.ca/bob/index.htm 20,20 25,5 30,20
RECT http://www.myserver.ca/bob/index.htm 10,10 20,20