 |
  HTML Tutorials GuruSearch! Web Glossary LiveWire Forums |
 |
 |
  Getting Started Text Links Colors Backgrounds Images Tables Frames Image Maps |
|
|
|
|
 Design Guide Forms Meta Tags JavaScript Style Sheets SSI CGI Web Browsers |
|
|
|
|
 HTML Editors Free Web Hosting Domain Names Copyrights |
 |
An image map is an inline image that is divided (invisibly) into different areas. Clicking on different areas on the image sends the browser to different places. To make an imagemap, you will need three things:
- an image
- a map file
- and a map program on your server
First, the image. It will appear on the screen within a web page, so it should be in either the GIF or XBM format. JPEG images will also work for people using most graphical browsers. You will need to know the size (in pixels) of the image. The example will use the GIF file "imagemap.GIF", which is 217 pixels wide by 145 pixels high.
Second, the map file. This is a text file that defines different regions on the image and associates different URLs with each. It also includes a default URL to be used for "leftover parts" of the image that haven't been included in a specific region. There are, unfortunately, two different map file formats - CERN and NCSA. I'll try to provide the basics of both.
You can define rectangles, circles, or polygons in your image, using the following commands and coordinates. The coordinates start from the upper left corner of the image. They are given in pairs (x,y), where x is the number of pixels to the right of the left-hand edge and y is the number of pixels below the top edge. For our example file, (0,0) is the upper left corner, (217,0) is the upper right corner, (0,145) is the lower left corner, and (do I need to say it) (217,145) is the lower right corner. Each region will have a URL associated with it. Note: You cannot use relative links; you must write the complete URL.
Here are the specific commands. The first line gives the CERN format, and the second gives the NCSA format. A brief explanation follows each command.
The default URL
default URL
This command is the same in both the CERN and NCSA formats. URL is the URL of the document to jump to if no other region is selected.
Rectangles:
rect (xupleft,yupleft) (xloright, yloright) URL
rect URL xupleft,yupleft xloright,yloright
x- and y-upleft give the location of the pixel in the upper left corner of the rectangle; x- and y-loright give the location of the pixel in the lower right corner of the rectangle. URL would be replaced by the actual address of the page that you want the user to jump to when they click in the rectangle.
Circles:
circle (xcenter,ycenter) radius URL
circle URL xcenter, ycenter radius
xcenter and ycenter give the location of the center pixel in a circle with radius radius.
Polygons:
polygon (x1,y1) (x2,y2).... URL
polygon URL x1,y1 x2,y2....
Each pair of coordinates gives a corner of the polygon. They will be connected in the order that you give them, with the last one connected back to the first.
Once you have defined all the regions on the image, associated them with URLs, and specified a default URL, save the text file and put it onto your server with your web page. The name should end with ".map". Should you use the CERN or the NCSA format? That will depend on the third part.
Third, you need to know some things about the map program on your server. It will be referred to as a cgi program (for Common Gateway Interface), such as htimage. You need to know whether it uses the CERN or NCSA format. You also need to know the path to the image program and its filename. To get this information, you can try looking around on your server's home page. Another way would be to contact your server administrator.
Now you are ready to set up the map. It only takes two lines in your HTML document - kind of a letdown, I know. Suppose the absolute URL to your image file is:
http://servername.com/users/james/imagemap.GIF
the map file is:
http://servername.com/users/james/imagemap.map
and the image program is:
http://servername.com/system/cgi/htimage
then you would create the imagemap in your page with the lines:
<A HREF ="http://servername.com/system/cgi/htimage/servername.com/users/james/imagemap.map">
<IMG SRC = "imagemap.GIF" ISMAP>
The hardest part is getting the information for the map program correct. Things may vary a bit from system to system. You can try it without the second servername.com if it doesn't work with it. The best thing to do is to ask for help on your specific system when you are getting the information.
A few final comments about imagemaps are in order. While fun, they are a bit slower than standard links, because the browser must do some extra communicating with the server to figure out where to go. They also require an image, which people may as noted earlier not be loading. This shouldn't stop you from using them; just keep these things in mind. It's nice to provide a text based alternative such as a list of the links you used in the map, along with the imagemap itself.
| Tell a friend about NetaGuru | Comment on NetaGuru | Bookmark NetaGuru This page was last updated 12/12/03 Please read our disclaimer and legal notices. All editorial content and graphics copyright 2002 NetaGuru. Designed and maintained by David Jones and Reid Beels. |
