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.
An
example of nohref:
<area shape="default" 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">
I hope this came in useful!
Ask in the forum
if you have any suggestions or comments.
advertisment
advertisement
Host With Us: HostingHelper.co.uk From Only $5.00p/m
