
Making Image Maps
How I do it...
First RTFM (the friendly manual, that is) there are manuals in various
places, here's one,
This is a tutorial for NCSA HTTPD 1.05a and Mosaic 2.x, this works for me as
I'm running HTTPD 1.05a, your mileage may vary especially if you have HTTPD 1.1.
Here's another one, also at NCSA.
How do I get HTTPD to understand imagemaps?
- Provide it with a program called imagemap
- You may have to compile this yourself or get a binary from someone else who
has done so.
- I've heard it may be hard to compile for HTTPD 1.1
- This then has to go into the htbin directory in your servers root
directory.
- This only has to be done once.
- This program is refered to as /htbin/imagemap for the rest of this
document.
How do I mark up a graphic?
There are three possible shapes, with corresponding co-ordinates:
- Rectangle - A rectangle is defined by its top left and bottom right
co-ordinates, so these are the ones to make a note of.
- Circle - A circle is defined by its origin and a point on the
circle.
- Polygon - A polygon is defined by a list of up to 100 points, and
you need to write down all of them.
How do I tell the server about the mark up ?
By writing a map file. This is a file that contains a list of shapes, along with
associated URL's and the points making up the shape.
Here's an example of what a mapfile looks like :
#Default
default http://uk6x01.ggr.co.uk:8000/akc22282/mm1/map5/doc_html/defhtml.html
# _COLOUR blue _LINEWIDTH 4 # _COMMENTS {}
poly http://uk6x01.ggr.co.uk:8000/akc22282/mm1/map5/doc_html/oz.html 759,423 764,419 764,385 789,370 801,362 808,351 816,354 828,344 841,347 839,356 851,364 863,342 885,394 850,439 829,436 818,427 810,416 788,423 766,429 759,423 759,423 759,423 759,423
# _COLOUR blue _LINEWIDTH 4 # _COMMENTS {greenland points to browserpage.}
poly http://uk6x01.ggr.co.uk:8000/akc22282/mm1/map5/doc_html/browser.html 288,44 290,40 320,35 350,36 374,30 411,35 377,68 334,79 322,97 306,92 302,74 313,64 309,48 288,44 288,44 288,44 288,44 288,44 288,44 288,44
# _COLOUR blue _LINEWIDTH 4 # _COMMENTS {This covers Africa.}
poly http://uk6x01.ggr.co.uk:8000/akc22282/mm1/map5/doc_html/africa.html 456,175 417,179 393,189 370,230 368,256 397,287 434,281 449,311 465,343 456,365 469,399 474,425 506,423 521,396 528,388 528,374 546,360 545,341 542,322 570,293 579,263 558,265 540,241 527,212 516,193 499,193 483,188 479,197 452,185 456,180 456,175
# _COLOUR blue _LINEWIDTH 4 # _COMMENTS {South America}
poly http://uk6x01.ggr.co.uk:8000/akc22282/mm1/map5/doc_html/s-america.html 184,272 200,260 228,267 264,288 315,323 296,384 277,396 280,405 265,428 256,427 260,436 257,442 248,443 248,448 241,449 244,453 247,459 240,465 248,472 247,484 260,495 237,494 225,483 215,452 209,401 209,368 189,357 172,326 170,304 182,287 183,271 184,271 184,272
- You can see from the file that you need a default URL, this is for the
background, and the map won't work if you don't have this.
- You are allowed only one line of comments for each URL line.
- The areas overwrite in the order they appear in the file
so shapes can overlap, it behaves as if it drops the shapes from a great height
in the order that they appear in the file, ie default first, and the last shape
lands on top of all the others.
- Other than that it's pretty straight forward, there are a couple of
gotchas, one being forgetting the default line and another is putting dots not
commas in the co-ordinates. This causes the server to say No Y value,
in fact this is the most common error message, and it shouldn't be taken at
face value. No Y value means there's something wrong somewhere.
How do I tell the server where the map file is?
Here's a tricky bit, you need to be able to write to a file in the HTTPD's conf
directory, the file is called imagemap.conf, here is /GGR-WWW/conf/imagemap.conf
testimage : /httpd/htdocs/imagemaps/test.map
London : /httpd/htdocs/imagemaps/london.map
genome : /httpd/htdocs/PMR_MAPS/genome.map
GHOME : /httpd/htdocs/imagemaps/graphhome.map
OurWorld : /httpd/htdocs/imagemaps/ourworld.map
- hashes (#) denotes comment lines (may cause trouble) and you must have the
colon.
- This is parsed by /htbin/imagemap and gives you a symbol which you
can reference in your document (the word on the left of the colon), and
relates that symbol to a map file.
- imagemap.conf is read for each click on the map, so you don't have
to restart the server each time you modify it, though you may not be able
to modify it, ask an admin to do it, or ask them to give you ownership of
the file.
- All of the mechanisms are now in place.
How do I get this into my HTML document ?
< A HREF="http://server.net.address/htbin/imagemap/OurWorld" >
< IMG SRC=./ourworld.gif ISMAP > < /A >
You need to be able to reference the image you marked up, in this case it's
ourworld.gif in the same directory as the HTML, and the HREF is to the
symbol defined in imagemap.conf earlier, this symbol is passed to
/htbin/imagemap the program installed at the beginning.
So what happens when I click on the map
- You send the HREF and set of co-ordinates to the server, Mosaic knows to
send the co-ordinates because of the ISMAP keyword in the IMG
reference.
- The server starts the /htbin/imagemap program, and gives it the
symbol (OurWorld) as input as well as the co-ordinates of your click.
- The imagemap program reads /conf/imagemap.conf (which is
always in the same place)
- The imagemap program looks up and parses the map file that
corresponds to the symbol passed to it.
- It finds the correct URL by comparing the co-ordinates it was sent with the
areas defined in the map file
- Imagemap then returns the URL to the server and exits (this is why the
server doesn't need to update when imapemap.conf changes)
- The server then looks up the URL and returns it to the user.
---
Martin Hargreaves