Image Maps
- is an image that has regions in it that serve as "hot spots".
- when you click with your mouse on a "hot spot" it will link you
to another site.
- useful for web-design when you want portions of an image to
serve as navigational features in the page.
Two Kinds of Image Maps
Image Maps work basically by tying regions of an image to
hypertext links. However, there are two ways in which
this can be accomplished in a web-page. They are:
- Server-Side image maps
- Client-Side image maps
Server-Side Image Maps
These are implemented using an image displayed by the client
and a program that runs on the server.
The Steps:
- First browser loads page with an image map on it.
- Then user clicks with mouse on some region in the image map.
- This calls a special program on the web server and the client
machine also sends the location of where the mouse clicked.
- This special program looks up inside of a special map file
that matches regions to links and finds the link it should follow.
This server program returns the link reference to the browser.
Needed: What is needed is the
image, a special
map file and
someway of telling the browser in HTML that the image is
an Image Map so it can respond to clicks as described above.
Example with Map File
|
Map File
default http://www.monterey.edu/academic/faculty/grewe
#my dogs hearing
poly ear.html 22,58 79,51 51,103
#dogs nose
circle http://www.monterey.edu/academic/faculty/grewe/nose.html 90,179 100,202
|
How to include Server Side Image Map in a web page
< a href="map_file.map" > <img src="image_file.gif" ISMAP > < /a >
|
In the case above we are using a gif image...but, this is not necessarily
a requirement.
NOTE:
- Fortunately, there are tools such as MapEdit and
MapThis that will automatically construct a server side
Image Map for you and generate the special map file.
- Now you must transfer not only the image contained in the web-file
but, also the corresponding special map file to the server.
- If you have a web-page containing a Server-Side Image Map and
this web-page, image and map file are on a local machine (e.g. on
a diskette) and not on the server then when you view it and try
to use the image map....it will not work properly as there is no
special server program on your local machine to handle the mouse
clicks. Try it out...it will simply pop up the map file each time
you click on it. Hence, you must have the web-site on a server
for a Server-Side Image Map to work properly
Client-Side Image Maps
In this case all of the work is done by the client side.
The concepts of having hotspots and tying them to links
is the same as in the Server-Side Image Maps. The details
of how you represent this information is different.
In the client side, the mapping information is present in
the web-page itself and a separate map file is not created.
All of this information is inside of a:
This code can fortunately be constructed automatically
using a program such as MapThis and then simply inserted
into your html file.
You also need to add the following line to your html file
wherever you want your image map to appear:
<img src="image_file.gif" USEMAP="#x" > < /a >
where
x is the name in the MAP tag above!
© Lynne Grewe