UGN Security
Posted By: BackSlash How To Make A Client-Side Image Map - 03/17/02 08:45 PM
-----------------------
HOW TO MAKE AN IMAGE MAP
-----------------------

Personally I find the use of image maps of all kinds useless, however, they do hold a certain level of entertainment and can come in use sometimes. An image map is nothing but a image with different parts of it linked to a location. The below tutorial will explain how to make a client-side image map opposed to one using CGI. This means nothing but good ole HTML. Unfortunately, this will only work on certian browsers and does have its downsides.

--------------------
Materials
--------------------

1. Text Editor
2. WYSIWYG Editor (If you prefer to access the html code from there.)
3. A Map Program
4. This Tutorial

--------------------
How It's Done
--------------------

First, you must find a map editing program. The reason for this is that a image map is a bunch of points and you can't find the points yourself. You need the program to make it come out right. Follow the link below to find one.
http://www.boutell.com/mapedit

Follow the programs instructions and it will give you the points needed for your image map.

--------------------

Next, you have to place the image and the points on your page. To place the image on your page use the code below.

<A HREF="backslash.map">
<IMG SRC="backslash.gif" HEIGHT="376" WIDTH="425" ISMAP USEMAP="#slasharea"></A>

Most of that code is rather self explanitory with the "a href" meaning the link being denoted to the map, "img src" is just the regular image command, "height" and "width" are the size of the image, "ismap" tells your browser it is an image map, and "usemap" tells the browser where to find the cordinates.

---------------------

Now that you've got the image up, you need to put the cordinates on your page to make it all work. The code is below.

<map NAME="slasharea">

<area SHAPE=RECT COORDS="45,321 134,92" HREF="http://www.nba.com" ALT="nba home">

<area SHAPE=CIRCLE COORDS="107,158 132,162" HREF="http://www.ebay.com" ALT="ebay page">

<area SHAPE=CIRCLE COORDS="21,73 25,99" HREF="http://www.beckett.com" ALT="beckett home">

<area SHAPE=POLY COORDS="9,115 86,79 98,116 69,131 86,175 48,206" HREF="http://www.undergroundnews.com" ALT="ugn home">

<area SHAPE=default HREF="index.html">

</MAP>

Take note that the "name" at first must be the same as "usemap" in the code where we placed the image on the page. Then look and see that different shapes are denoted and links for each shape are denoted along with the cordinates for the shape (don't try my cordinates because they are not correct, this is where the program must be used to create them).

--------------------

More or less that is all there is to a client-side image map. Of course there are disadvantages of doing it this way opposed to through CGI. And, there are many other things that can be done with image maps, but hopefully this gives you a basic idea of how it is done.

-BackSlash
© UGN Security Forum