| |
|
|
|
How To Make An Imagemap
Chapter 1: Server-Side ImagemapsWith Server-Side
imagemaps:
- You place some code in your HTML pages
and the image is displayed.
- When the user clicks on the image, the X and Y coordinates
of the click, relative to the top left of the image, are sent back to
the web server.
- The web server then needs to figure out how to respond.
The hard part is making your web server respond in the correct way
to each click. The web server needs to figure out what to do based on
the X,Y coordinate of the click.
You setup make the web server respond to the click either of two
different ways:
- Either, you can make clicks on the image link to your own
ASP,
CGI,
PHP script,
and then develop your own script which responds in whichever
way you want.
- Or, on some
web hosts,
it is possible to setup a text file specifying the coordinates of various
regions on the image, and what happens when any particular region is clicked.
Just to make this more confusing there are at least two different formats
that this text file can be in, depending on your
web host:
NCSA and CERN. Check with your web host to see which, if any, of these
formats they support.
I don't recommend using Server-Side imagemaps,
because:
- Every click on the image generates a separate request to the server.
- The procedures for Server-Side
imagemaps involve either writing your
own scripts (too much work!), or depend on which particular
web host
you are currently using (and thus might need to be changed if you switch
to another
web host).
- It is not possible to provide the user with any visual cues when they
are moving their mouse over the
imagemap. Instead, all they see is the
status line of the browser contains the URL of the script with the X
and Y coordinates as parameters. You can see what I mean by this, by
looking at the imagemap below, and
moving your mouse over it.
Here is Server-Side side imagemap (I haven't
however bothered to make it actually work, a click anywhere on the imagemap
will simply return you to this page, but you will be able to see the X,Y
coordinates passed in the URL parameters if you click).
Server-Side Imagemap
(Not Functional)
Here is the HTML code used to generate that
imagemap, with the two crucial parts shown in red:
<A HREF="howto_imagemap.php"><IMG SRC="imagemap.gif" WIDTH="250" HEIGHT="250" BORDER="1" ISMAP></A>
- The first part in red is the URL of the script on
the server to link to.
- The ISMAP attribute tells the browser, that the
linked image should be treated as a Server-Side
imagemap, and that the X,Y coordinates
should be sent to the server when the user clicks.
At this point, I'll move on, but if you want to read more:
There is a tutorial on NCSA Server-Side
imagemaps at
http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemapping.html
Related Software:
- Trellian ImageMapper
Trellian Image Mapper is the quickest way to create image mapped images for your website. Full support for hyperlinked rectangles, circles and even polygon regions is provided and you can import all your current image maps. After you have created your image map, Trellian Image Mapper will generate the required HTML code ready to be pasted directly into your favorite HTML editor. You can even use the built-in image map previewer.
- Web Hotspots
Software for creating Client-Side Imagemaps.
Related Web Sites:
|
|
|
