Saturday, November 2, 2024

So You Want A Client-Side Image Map, Huh?

Use these to jump around or read it all…


[What Is This Thing][Let’s
Make A Map
]
[The Map]
[Putting The
Image On The Page
]
[The Coordinates]


What Is This Thing?


     A client-side image map is an image
map that is run by the browser rather than a CGI. What happens
is you will provide all the information required to run the map in your HTML
document. That’s why it’s called a client-side map. The map’s functions are provided on the client’s end of things rather than at your server’s side. It’s not overly hard, but again–it doesn’t work on all browsers.
But if you don’t have access to a CGI…on and on. You decide to use what you think will work best.




     That thing above is a client-side
image map. Do you like the graphic? I got it by scanning a clip
art book. You should get one or six. They’re great. All the
images are in crisp black and white and scan wonderfully. And
better yet, all the images are out from under copyright. You can
use them to your heart’s content. I bought my three books from
B & N. Great books.


     Lay your pointer across the
graphic. Along the bottom of your browser, where it now reads
“Document Done” you should be seeing different URL’s fly by as
you move over the graphic. If you do not, your browser is not
high enough to support these image maps.


     Remember the last time you ran your
pointer over a basic CGI run image map? (You can see one HERE) As you
moved your pointer across the map, the coordinates of the map
flew by. That’s because the pointer was reading the map
coordinates. Here, the pointer is still reading the coordinates,
but instead, its putting up the URL associated with the
coordinates.



If what I have just said is complete Greek to you–you may want
to read my basic Image Map tutorial first.




Let’s Make A Map!

     In order to make a map, you need to
go and get a map-making program. There’s no way around it. There are only a million different programs out there that will do the trick for you. I could not even begin to explain each one here. You must go
out, find one you like, and use its instructions to make your map. That said…



  • The best program for Windows (my opinion) is MapEdit (41K
    zipped)
    It is wonderfully easy. It’s what I use.
  • The best program for MAC is
    MAC-Image-Map (285K Fat Binary)
  • If these don’t suit you, click
    Here to search others.


     You will find some programs that
will make client side image maps for you. I do not use the maps, thus I don’t use a program that does it for you. MapEdit just creates maps. I will write this tutorial as if you don’t have the ability to have a program do it all for you. It’ll make the process much easier to understand.




The Map


     So, what does a map look like?
Good question. Here’s the map I made, with MapEdit, using the
image above:

circle http://www.cnn.com 25,72 28,97

poly http://www.usatoday.com 9,115 86,79 98,116 69,131 86,175,48,206

circle http://www.cbs.com 107,158 132,162

rect http://www.nfl.com 91,30 186,98

default https://www.htmlgoodies.com



     See what a map is? Its just a
grid of points. Depending on the size and resolution of the
image, the grid is made up of tighter or looser points. That’s
why you need the map program to do the work for you. It’s
impossible to eyeball the size of the map and pick out points.





Putting The Image On The Page

     Once you have the map finished and
know the points, you need to place them and the image they
support on the page. We’ll do the image first. Here’s the
command I used to place the monk image above:

<A HREF=”monk.map”>
<IMG SRC=”monk.gif” HEIGHT=”255″
WIDTH=”262″ ISMAP USEMAP=”#monkareas”></A>


     Neat, Huh? Look at what is
happening:



  • A HREF= denoted the link to the map. You must place
    the name of the map you created in after the HREF. This is the map you created using the map
    program you downloaded.
  • IMG SRC= is done just like your basic image command.
  • HEIGHT= deals with the image height in pixels. You
    need to put this in so the image has a set of boundaries. If you
    do not know the number of pixels your image contains, open it
    alone in Netscape or your browser. You should get the number of
    pixels across the top.
  • WIDTH= deals with the image width in pixels. Ditto
    what I said above.
  • ISMAP stands alone. It tells the browser that this is
    an image map. Basically, the browser is being told that the
    image is active, but rather to read the map instead of activating the image.
  • USEMAP= tells the browser where to find the map
    coordinates. Notice the format is that of a
    page jump.
    The browser is being told where on the page to look for the map
    coordinates. In this case the coordinates are on a section of
    the HTML document marked “monkarea”. Please notice the #
    mark!
    You need that.
  • The /A command ends it.




The Coordinates


     OK, OK, I have the image up there.
Where do I put the coordinates of the map? Glad you asked. You
place them on your HTML page! “Won’t the coordinates show up on
the page?” you ask perplexed. “No”, I answer brazenly. Because you
set it aside as commands rather than straight text!

     Here are the coordinates for the
map above. Remember what the map looked like? Well, here are
those same coordinates in client side image map format:

<map NAME=”monkareas”>

<area SHAPE=RECT COORDS=”91,30 186,98″
HREF=”http://www.nfl.com” ALT=”NFL Home Page”>

<area SHAPE=CIRCLE COORDS=”25,72 28,97″
HREF=”http://www.cnn.com” ALT=”CNN Home Page”>

<area SHAPE=CIRCLE COORDS=”107,158 132,162″
HREF=”http://www.cbs.com” ALT=”CBS Home Page”>


<area SHAPE=POLY COORDS=”9,115 86,79 98,116 69,131 86,175
48,206″ HREF=”http://www.cnn.com” ALT=”USA TODAY Home Page”>


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

</MAP>


Here’s what you get:



  • You first denote that the following are the coordinates for
    the map. You do that with MAP NAME=. See that above?
    You place the name you used after the # mark above. Just don’t
    use the # mark here. The browser jumps to this part of
    your page to read coordinates rather than going to a CGI.
  • Then it’s a matter of following the format again and again.
    AREA denotes that this is a new section of the map.
  • SHAPE denoted the shape you used. The map program
    will tell you all this.
  • HREF denotes the URL this section points to.
  • ALT is a neat little deal that shows the URL if the
    person has their in-line images turned off.
  • You do a DEFAULT command following the format above.
    It denotes a URL for every part of the map not set aside by an
    image map set of coordinates.
  • /MAP wraps up the whole deal.


     That’s it. Follow all of this and,
boom. You should have a client-side image map. Again, remember
that this map format does not work on all browsers so be prepared
to offer a text only version of you page.

OK?…OK.


[What Is This Thing][Let’s
Make A Map
]
[The Map]

[Putting The Image On The Page]
[The Coordinates]




NFL Home Page

CNN Home Page

CBS Home Page

USA TODAY Home Page

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured