- Image Maps can be defined in two ways.
- The first way is to use one of the various shareware programs
available to create a map file that can be read by a CGI program on
your web server.
- However, since most people do not have the privilege of executing
CGI applications, the developers of HTML came out with the <MAP>
tag to allow HTML designers to create client-side image maps.
- The <MAP> tag allows a designer to embed information about
the image within the HTML code itself. Thus, the browser is able to
decide what areas of the image are hot-linked without using a server CGI
script.
- Client-side image maps introduce two tags(<MAP>, <AREA>)
and the USEMAP attribute for the <IMG> tag.
- The tags and attribute are described in the table below
| NAME |
DESCRIPTION |
| MAP |
Defines an image map. Takes an attribute of NAME that is used to
tie an image to a map |
| AREA |
Specifies a clickable area. Takes a SHAPE attribute of POLY, CIRCLE,
or RECT, a COORDS attribute that specifies the area to be made
clickable, and an HREF attribute that specifies the anchor URL for
user clicks. |
| USEMAP |
Used within the <IMG> tag to specify a map to use. This value
will correspond to the value of NAME in the <MAP> tag |
- To define an image map, you will use the <MAP> tag. This tag
takes an attribute that defines the name of the map. The name is
necessary so that you can tie a specific image to its corresponding map
in case you have more than one image map on a page.
- To define clickable areas within the image, you use the <AREA>
tag with its corresponding SHAPE, COORDS and HREF attributes.
- The shape attribute specifies a circle, rectangle, or a
polygon. The COORDS attribute specifies the points that define those
shapes. The HREF specifies the URL that should be linked to if the
given shape is clicked on.
- A POLY shape will take a set of x/y coordinates to use as the dots
in a connect-the-dot game. For example, the following AREA description
would make a triangle:
<AREA SHAPE = "POLY"
COORDS = "0,0, 10,10, 0,20"
HREF = "poly.html">
- The RECT works just the same except that it expects four sets of
points whereas the POLY does not care.
- Finally, the CIRCLE shape takes a center point and radius such as
in the following example that creates a circle area centered at 10,10
with a radius of 30 pixels
<AREA SHAPE = "CIRCLE"
COORDS = "10,10, 30"
HREF = "circle.html">
- In addition you can use NOHREF instead of HREF to specify that the
area does not link anywhere.
- Once you have defined the clickable areas of your image, you need
to tie the image to the mappings. To do so, you specify the map name in the USEMAP attribute of the <IMG> tag.
- Let's take a look at the code for the Selena Sol Homepage imagemap.
<IMG SRC = "Graphics/sol_frontpage.gif"
BORDER = "0" WIDTH = "365"
HEIGHT = "273"
ALT = "[Navigation Image Map.]"
USEMAP = "#solmap">
<MAP NAME = "solmap">
<AREA SHAPE = "rect" HREF = "Personal/"
COORDS = "1,1 96,24">
<AREA SHAPE = "rect" HREF = "Personal/Resume/"
COORDS = " 212,47 254,60">
<AREA SHAPE = "rect" HREF = "Personal/creations.html"
COORDS = "214,62 317,73">
<AREA SHAPE = "rect" HREF = "Scripts/"
COORDS = " 291,77 365,103">
<AREA SHAPE = "rect" HREF = "Library/Struggle/"
COORDS = " 0,89 113,115">
<AREA SHAPE = "rect" HREF = "Library/"
COORDS = " 211,144 360,169">
<AREA SHAPE = "rect" HREF = "Library/Barnaby/"
COORDS = " 1,201 77,220">
<AREA SHAPE = "rect" HREF = "Launchpad/"
COORDS = " 233,175 340,206">
<AREA SHAPE = "rect" HREF = "kudos.html"
COORDS = " 87,224 142,243">
</MAP>
Previous Page |
Next Page
|
