Scribd
Upload
27 views2 pages

Create Client-Side Imagemaps: Image Mapname Deathstar - JPG Stationmap

Client-side imagemaps allow images to act as clickable maps without requiring a CGI program. They use HTML tags to define clickable regions of an image. The image tag references the image file and map definition. The map definition specifies the shape, coordinates, and links for each region using area tags. Specifying regions in order of nesting allows overlapping areas to be defined.

Uploaded by

amardas kg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
27 views2 pages

Create Client-Side Imagemaps: Image Mapname Deathstar - JPG Stationmap

Client-side imagemaps allow images to act as clickable maps without requiring a CGI program. They use HTML tags to define clickable regions of an image. The image tag references the image file and map definition. The map definition specifies the shape, coordinates, and links for each region using area tags. Specifying regions in order of nesting allows overlapping areas to be defined.

Uploaded by

amardas kg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Create client-side imagemaps

Client-side imagemaps are clickable images that don't require a CGI program to
make them work. Instead, the browser interprets the imagemap based
on HTML tags. Because they are faster and more reliable, client-side imagemaps
have largely supplanted server-side imagemaps.

To set up a client-side imagemap, create the image that you want to use as a map.
Then, in the HTML document where you want the imagemap to appear, enter the
following HTML tag:

<IMG SRC="image" USEMAP="mapname">

Replace image with the URL of the image that you want to use as a clickable image.
Replace mapname with the name of the map definition (described below). For
example, if the name of your image is deathstar.jpg and the map information is in
the map definition named stationmap, you would type:

<IMG SRC="deathstar.jpg" USEMAP="#stationmap">

Use a program like Photoshop or PaintShop Pro to determine the coordinates (in
pixels) of the borders of your regions. Once you have accomplished that, you will
need to specify what regions of the image correspond to what URLs. Create the map
definition in the following format:

<MAP NAME="name">

<AREA SHAPE="method" COORDS="coordinates" HREF="url">

<AREA SHAPE="method" COORDS="coordinates" HREF="url">

<AREA SHAPE="method" COORDS="coordinates" HREF="url">

<AREA SHAPE="method" NOHREF>

</MAP>

 Replace name with the name of this map (for example, stationmap).
 Replace method with the shape of the region to be mapped (that
is, rect, circle, or poly).
o rect: The simplest method, the coordinates define the x,y of the upper left
corner and the coordinate of the lower right corner, in that order.
o circle: The three coordinates for a circle represent the x,y coordinates for the
center of the circle, and the radius of the circle in pixels, in that order.

o poly: Indicates non-rectangular polygons. Each x,y coordinate is a vertex of


the polygon, and up to 100 vertices can be defined.

 Replace coordinates with the x and y coordinates that mark the parts of the
image that delimit the region.
 Replace url with the URL of the page that the region leads to.
 The NOHREF attribute indicates that the coordinates defined don't lead to a
URL. You should include this attribute in the last line of the map definition.
The browser evaluates regions based on the order they appeared in the map file. So,
if you have a region within a region, then the smaller region would have to appear
first in the map definition to be expressed, for example:

<MAP NAME="shapes">

<!-- Triangle in the center -->

<AREA SHAPE="poly" COORDS="50,50,50,70,70,70" HREF="oops.html">

<!-- Circle around triangle -->

<AREA SHAPE="circle" COORDS="60,60,20"


HREF="http//bogus.url.com/~scooby/">

<!-- Square around circle -->

<AREA SHAPE="rect" COORDS="20,20,100,100" HREF="loopy/crazy.html">

<!-- Part of the map that doesn't go anywhere -->

<AREA SHAPE="rect" COORDS="0,0,120,120" NOHREF>

</MAP>

You might also like