imagemap

Aktivne slike (image maps)

Read This First!
This is a tutorial explaining a client side-image map. This type of image map will only work on at least Netscape browser 2.02 or equivalent. That means if your viewer is using Netscape 1.1--he or she can't use this! The browser will not read the commands.
My suggestion is to do a regular, CGI driven, image map (See So You Want An Image Map, Huh for how to's) The CGI driven image map works on all levels of browsers. The client-side map does not. If you do use one, be sure to offer regular A HREF links in addition to the image map. Let's go on.

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 Barnes and Nobels. 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)

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 http://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="http://www.htmlgoodies.com">

</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]

[Back to the HTML Goodies Page]