How to create Web sites easily

The most complete guide for the Web page builder
All you'll ever need to know about homepages and HTML

Image maps

This page brings info about image maps, be it client-side or server-side. Now you can implement your own image maps!

Server-side image maps

Question posted by Computer Whiz (Gina). Click on the link to go to a cool page. Thanks a lot to you for sending your question!

That big graphic at the beginning of the GeoCities home page (yeah, that one that takes years to load) is an image map. The idea of an image map is that, depending on the region of the graphic that you click, the server directs you to different pages.

When you click an image map on a page, the following happens:

Your browser sends to the host server the coordinates of the exact point of the graphic on which you clicked
The server sends back an URL, in response to your click. That URL depends on the info that the map file had.

Yeah, the map file contains the information that tells your browser where to go, depending on where you clicked.

To create the map file, you'll have to use one of the dozens of image map editors found at Tucows, some are good and fast, some are real bulky. Somehow, I can't help you with the creation of it.

What I can do, is tell you how to put an image map in your page. Upload the graphic file for your image map and the map file you created to your home page's directory. Afterwards put on your page a hyperlink to the map file. Between the <A HREF="xxx"> and </A> tags, put an <IMG SRC="xxx"> tag, pointing to the graphic you designed to be the image map, and include inside the <IMG> tag an ISMAP parameter.

This is an example of an image map, composed by the graphic "geo_b.gif" and the map file "geo_b.map":

<A HREF="geo_b.map"><IMG SRC="geo_b.gif" ISMAP></a>

Note the ISMAP word in the <IMG SRC> tag.

For more information about how to specify file names in tags, click here.

Client-side image maps

This info is going to be very useful to you since this kind of image map is becoming very popular. Thanks to The Omega for this complete info!

Client side imagemaps are (in my opinion) more useful than server-side, since you have more control. To start, you need an image to use as the map. A graphics program that displays a pixel location is also very useful.

How to begin defining a map

Begin with the <MAP> tag, like this:

<MAP NAME="mapname">

That map name will be used to bind a graphic to it. Next, you need to define each active area. Areas are a zone of the graphic that will send you to a location when you click on them. Put an AREA tag for each of the particular areas you want to be clickable:

Parameters for the AREA tag

<AREA SHAPE=value HREF="url" COORDS=number_string ALT="text">

The SHAPE parameter defines an area of an specific form. Here are the choices for a shape in the AREA tag:

SHAPE=RECT
Defines a rectangular area.
SHAPE=CIRCLE
Defines a circular area.
SHAPE=POLY
Defines a polygon. Very useful.
SHAPE=DEFAULT
Whatever is not taken by other areas. You can only have ONE. Does not use COORDS.

The HREF parameter specifies where to go if the specific area is clicked. Put HREF= and an URL between quotes or, if you want no action, put only the word NOHREF instead. For more info on specifying URLs, look here.

As we already defined an area type (shape) we have to set coordinates for it. Use the COORDS parameter as follows:

When using AREA=RECT
COORDS="x1,y1,x2,y2" where (x1,y1) is the upper-left corner pixel, and (x2,y2) is the lower-right corner.
When using AREA=CIRCLE
COORDS="x,y,r" where (x,y) is the center, and r is the radius in pixels. COORDS="x1,y1,x2,y2,x3,y3,etc." where (x1,y1) is one corner, (x2,y2) is the next, (x3,y3) next, (x4,y4) is next, etc. the last connects back to the first. For example, "100,100,90,110,110,110" defines a triangle.
When putting AREA=DEFAULT
Does not use the COORDS parameter, because this area is all parts of the graphic that haven't been defined any shape.

The ALT parameter has the text you want graphic-disabled browsers to display instead. Just the URLs will be displayed if omitted.

Ending the image map

End the image map with <MAP>.

Binding a graphic with that image map

To place the map on your page, use this tag:

<IMG SRC="map.gif" HEIGHT=### WIDTH=### ALT="Load the @#$%& Map!" USEMAP="#mapname">

It's just a regular image tag, with one new parameter. USEMAP="#mapname" tells it to use mapname as the map, which we defined before.

Notes

You can define your image map everywhere in your HTML document, but try to do so before the graphic because sometimes the graphic loads but the HTML document has not finished loading and the image map might not be loaded yet, so the image map for the graphic won't work.
Get a graphics program that shows you the coordinates of a specific pixel on the graphic you will use as the image map. If not, remember that coordinates are measured from 0,0 being the upper-left corner of the graphic.

Member of the ILE

Free Home Pages at GeoCities

[Main page] [HTML help] [MIDI page] [Murphy's Laws] [More information]
[Feedback form to email me] [Sign guestbook] [Mail me!]