Image maps, once learned, can be very simple. But for the beginner, they can be
infuriating. It took me 3 days to get my first image map to work. Now it takes about 2
minutes. Anyway, first you must decide whether you want client-side or server-side
image maps. What's the difference? Client-Side
maps work on the browsers end. This works great, but if the browser can't handle them
(like Netscape 1.0) than people can't use them. But, in my opinion, they're better. You
don't have to worry about having cgi-bin access to control it.
Server-Side works like the client-side map, but is
actually a program. When the map is clicked on, the program on the servers end runs and
brings up the appropriate URL for the browser to load. It works on almost every browser
that I know of. But if you do not have access to the cgi-bin directory, it can be a pain.
Client-Side Image Maps
An example of a client-side map would be the map on the main page of this site. The code
for the map looks like this:
<map name="MainMap"> <area
shape=rect coords="0,0,187,30" href="tags/">
<area shape=rect coords="1,31,187,56" href="forms/">
<area shape=rect coords="1,56,187,77" href="tables/">
<area shape=rect coords="1,77,187,100" href="frames/">
<area shape=rect coords="1,100,187,124" href="cgi/">
<area shape=rect coords="1,124,187,148" href="javascript">
<area shape=rect coords="1,148,187,170" href="java/">
<area shape=rect coords="1,170,187,197" href="editors.html">
<area shape=rect coords="1,198,187,239" href="links.html">
</map>
<img src="picts/mainmap.gif" width=187 height=239 border=0 alt=The HTML
Tutor main map - for HTML buffs everywhere" usemap="#MainMap">
The <map></map> defines that this is
indeed a map, and namenames the map for use in the browser. It's referenced in the <img
src>. This defines that the map exists. Now for the tags within the map.
area shape=rect - defines the shape of the area that will be the link. This can br
rect (rectangle), circle and poly (polygon).
coords="1,2,3,4" - these define the coordinates of the circle, polygon or
rectangle.
href="file.html" - this is a hypertext link that this area of the map
will refer to. This can also be an image, or even a mailto: tag. That's up to you.
Now, we end it all up with the <img> tag.
You;ll notice it's the same as all other tags, but it has usemap="#MainMap".
Without this, the map will not work. This is what tells the browser that the picture being
loaded should be associated with the map and used accordingly.
Well, that's great... but how do we figure out the
coordinates? Well, there are two ways. The easy way is to download Map This!, an
excellent image map editor for Windows 95. This is an easy way to make them. If you can't
use that, than try getting Paint Shop Pro. This program allows you to see the coordinates
of the picture. It's also a pretty darn good graphics program. Just use the eyedropper to
define the coordinates.
Server-Side Image Maps
Server-side image maps have the same basic layout of client-side image maps, but they are
in a little different order. We'll use the coordinates from the map above. But here's how
they would appear in a server-side map:
default http://206.156.15.206/html/
rect http://206.156.15.206/html/tags/ 0,0 187,30
rect http://206.156.15.206/html/forms/ 1,31 187,56
rect http://206.156.15.206/html/tables/ 1,56 187,77
rect http://206.156.15.206/html/frames/ 1,77 187,100
rect http://206.156.15.206/html/cgi/ 1,100 187,124
rect http://206.156.15.206/html/javascript 1,124 187,148
rect http://206.156.15.206/html/java/ 1,148 187,170
rect http://206.156.15.206/html/editors.html 1,170 187,197
rect http://206.156.15.206/html/links.html 1,198 187,239
This tells the server that the selection will be a
rectangle, it should like to http://206.156.15.206/html/tags with the following
coordinates. The default defines what the picture should link to if an area is
clicked that is not defined by the coordinates. To activate it on most systems, you would
use <a href="/cgi-bin/imagemap/cgi-bin/maps/html.map"><img
src="picts/map.gif" ISMAP></a>. The ISMAP tells the server that
this picture is an image map, and the html.map defines it's coordinates. The
/cgi-bin/imagemap is the cgi script on the server that will be used, and the
/cgi-bin/maps/html.map tells the imagemap script where the file is that defines the
coordinates.
I know this may sound a little confusing. So if you want to
have server-side image maps, contact your local webmaster and ask him to help you. And if
all else fails, ask me.
- For a more detailed description of both styles of maps,
please feel free to visit some of these excellent sites for tutorials:
-
Return Home
All Artwork &
Design © 1997-1999 Krit Spooker |
