- Image map flavors:
There are two kinds of image maps, client side
image maps and server side. The client side map coordinates and URL
info are right in the
HTML document. The browser on your machine will do the work of putting
the pieces together. Server side image maps are processed by the
hardware and software that serves your web site. Client side image
maps are
a little newer technology so not all versions of all browsers supports
it. NetScape Navigator 1.0 and Internet Explorer 2.0 do not support
client side image maps. Neither do some experimental or "obscure" browsers.
However this is a very small portion of the current browsers out
there.
- Image mapping tools:
This tutorial walks you through creating an image map by hand but
there are many tools out there that will automate this process
for you.
Most WYSIWYG page authoring applications such as Dreamweaver
have image mapping tools. You can also create image maps in Macromedia's
Fireworks or Adobe ImageReady. There are some image mapping tools
available online, if you are using Windows OR a Mac or even Unix
and Linux there is a image map making tool available for download
by Tom Boutell called MapEdit.
- Doing it by hand:
You need 3 things to create an image map by hand, a (GIF, JPEG or PNG)
graphic, a graphics program that will display the exact X Y coordinates
of your curser when poised over your graphic (Photoshop's info
palette or GraphicConverter's Picture/Show Position work great) and
a text
editor for writing the HTML. There are 4 shapes that you can use
to describe an area:
RECTANGLE - (abv. to RECT) Upper left X Y and lower right X Y coordinates
of the rectangle. EX: COORDS="X1,Y1,X2,Y2" where X1,Y1
defines upper left coordinate of rectangle and X2,Y2 defines lower
right coordinates
of the rectangle.
CIRCLE - (abv. to CIRC) For a circle the coordinates are the circle
center X and Y coordinates as well as a third number that corresponds
to the radius as the number of pixels to the edge of the circle.
POLY - For a polygon of at most 100 vertices. A
vertex is a set of X and Y coordinates.
POINT - A single X Y coordinate. If you have 2 points whichever you
are closest to when you click is selected.
- Getting started:
Your first step would be to determine which of the above shapes are
best suited to each area of your image map then go into your graphics
editor and jot down the pixel coordinates you would need for each
shape. Next your HTML code will describe the area over your graphic
and assign a local or full URL to it. This is from my home page
HTML, so therefore, this is a client side image map:
< HTML>
<
HEAD><TITLE>Building Image Maps</TITLE></HEAD>
< BODY>
<
MAP NAME="IndexImageMap1">
<
AREA SHAPE="rect"
COORDS="203,187,309,282"
HREF="../Resume/Resume.html">
<
AREA SHAPE="rect"
COORDS="0,0,203,282"
HREF="../JOTW/JokeOfTheWeak.html">
<
AREA SHAPE="poly"
COORDS="204,0,204,187,308,187,308,257,409,257,409,0"
HREF="../WebBuilding/WebBuilding.html">
<
AREA SHAPE="poly"
COORDS="248,282,248,509,409,509,409,258,309,258,309,282"
HREF="../Marathon/Marathon.html">
<
AREA SHAPE="rect"
COORDS="0,281,248,511"
HREF="../Lynx/Lynx.html">
<
AREA SHAPE="rect"
COORDS="165,513,410,694"
HREF="../Hobbies/Hobbies.html">
<
AREA SHAPE="rect"
COORDS="0,513,164,694"
HREF="../Extra/Extra.html">
< /MAP>
<
IMG SRC="images/IndexImageMap.jpg" align="BOTTOM" border="0" USEMAP="#IndexImageMap1" ISMAP
alt="Image Map O Doom" width="410" height="693" naturalsizeflag="3">
< /BODY>
< /HTML>
Where:
- MAP NAME - Ties map name to coordinates
and URLs. You can use any name you want, but keep it similar to the map
graphics file name
for simplicity
sake.
- AREA SHAPE - defines format of coordinates for the
browser to read.
- HREF - The URL a particular set of coordinates point to.
- IMG SRC - Path/filename
of map graphic.
- USEMAP - Refers path/filename back to coordinate definitions.
- ISMAP - Defines
the image as an image map.
- To create a server side image map:
Create a text file in the /cgi-bin/imagemap directory on the server
as the image file you will map having the form of ImageMapFileName.map.
(This is a typical configuration however, you should follow your
server administrator's instructions) In this text file you define
the area shapes like this:
default ../WebBuilding/ImageMap.html
rect ../Hobbies/Hobbies.html 165,513,410,694
rect ../Extra/Extra.html 0,513,164,694
rect ../Lynx/Lynx.html 0,281,248,511
poly ../Marathon/Marathon.html 248,282,248,509,409,509,409,258,309,258,309,282
poly ../WebBuilding/WebBuilding.html 204,0,204,187,308,187,308,257,409,257,409,0
rect ../Resume/Resume.html 203,187,309,282
rect ../JOTW/JokeOfTheWeak.html 0,0,203,282
Where:
default - establishes the default URL that the browser will display
if you click outside of the areas you define. Set this to the current
document if you want the impression that the click had no effect.
rect, poly, circ - coordinates may vary from server to server but
is generally the same as the client side coordinates. Contact your
server
administrator for exact instructions.
Your HTML will look something
like this:
< HTML>
<
HEAD><TITLE>Building Image Maps</TITLE></HEAD>
< BODY>
<
A HREF="/cgi-bin/imagemap/IndexImageMap.map">
<
IMG SRC="images/IndexImageMap.jpg" ISMAP></A>
< /BODY>
< /HTML>
The anchor tag links the graphic to the map definition file (IndexImageMap.map).
The ISMAP attribute tells the browser that the graphic is an image
map.
- The last word:
Provide a redundant set of regular text HTML links on the page. The
user may not be able to view graphics or has his graphics turned
off. This way all will be able to navigate your site. You also
want to keep in mind that large image map files will slow the loading
of the page. That is one of the reasons I removed the image map
you
see below from the home page. Tis a shame too, because I really
love the graphics in it.
|
