|Image Maps Tutorial|
Image Maps in HTML
An image map is just a kind of clickable image, which you can make to have different areas link to different URLs. (An example is below.) To make an image map, you need to add 2 groups of codes into your web page - the first is a map section, which contains area definitions, and the second is a special img tag, with an add-on to make it use the map.
NOTE: When you create an image map as part of your document, you should
always create text links to compliment the image links. This allows users
of non-graphic browsers or those with the images turned off to fully access
your page. It also acts as a back-up should your image not load up.
The map tag
This is where you assign a name to your image map, which you will need to use later in the img tag. The name is a required parameter of the map tag, and the map will not work without it. When used, a map tag will look like this:<map name="put name here">Area Tags Go In Here...</map>
Note that the map tag must be closed at the end.
The area tag
This is where you assign the individual clickable areas of your image. The area tag has 3 required parameters - the shape, the coords, and the href parameter. If an area tag is made without all three, your image map will not work! Here is an example area tag:<area shape="put shape type here" coords="put coordinates here" href="put URL here">
Note that the things in brackets are not what you actually put there. Read
on for explanations of those:
Shape and Coords:
There are three shapes that can be used for an image map - circle, rect, and poly. Each of the shapes requires a different number of numbers in the coords parameter. The order of the area tags is very important - the first area tag that mentions an area is the one which is used, so you should make sure you set your small areas first, and the large ones (which may wrap around small ones) last.
For a circle, you must specify three numbers: The X and Y coordinates of the center of the circle, and the radius.<area shape="circle" coords="284,131,60" href="link.htm">
rect makes a rectangular area clickable, and for it, you need 4 numbers - the X and Y coordinate of the top left corner, and the X and Y coordinate of the bottom right corner.<area shape="rect" coords="91,148,194,262" href="link.htm">
poly is the last type of area tag. It is used to create a polygon, or multi-sided shape, which the viewer can click on. For coords, it requires a list of X and Y coordinates of all of the points along the edge of the polygon. For complicated poly shapes, the coords parameter can be very long, and it becomes easy to make mistakes. It is usually best to keep your poly areas down to 8 points or less.<area shape="poly" coords="203,213,203,387,325,336" href="link.htm">
href or nohref - Last is the destination for your clickable area, which is
specified by the href field, in exactly the same manner as the href parameter
of the <a> tag. Optionally, if you wish to specify an area, which does
not react to being clicked on, you can replace the href parameter with nohref.
Thus, any area not defined will not react to being clicked on.
The <img> tag used here is exactly the same as the normal one, with one addition - you must add a usemap parameter to it, which points to the map you created previously in your document. For example, an image map that uses a map named "navigation" would look like this:<img src="navigation.gif" alt="Navigation" usemap="#navigation">
If you'd like to see a working example of an Image Map (an alien spaceship), go Here.