ImageMaps at Channel1

Image Maps at Channel 1

This page explains how to implement image-mapping. Visitors please note that these instructions are specific to the configuration of Channel 1's machine and may not be the same on other implementations.

What is image mapping?

When you incorporate image-mapping into your Web page, it means that you display a picture as an anchor ... except different coordinates of the picture serve as anchors to different URLs. An example of this can be found on the bottom of this web page. The navigational button bar there is a single image with different URL's mapped to different areas.

You can find other examples of image mapping at:

So how do I implement image-mapping on my Channel 1 Web page?

Easy.
First, you need an image in gif format.
Second, you need to decide what parts of the image you want linked to what URLs.
For example, when a user clicks on SERVICES on our footer navigational gif, "http://www.channel1.com/services/" is accessed.
You need to figure out the coordinates of the areas you want to mark off. Basically, you can mark off circles, rectangles, and polygons in the image. For example, we marked off several rectangles on the gif on our homepage. These coordinates need to be stored in a configuration file in your www directory.
Start up a Unix text editor, such as jove or vi or emacs. . .type something like the following (this is the configuration file for our footer clickable gif):

default http://www.channel1.com/
rect (0,0) (58,32) http://mall.channel1.com/
rect (58,0) (109,32) http://www.chathouse.com/
rect (109,0) (170,32) http://www.filelibrary.com/
rect (170,0) (255,32) http://www.channel1.com/services/
rect (255,0) (307,32) http://www.channel1.com/etc/
rect (307,0) (366,32) http://www.channel1.com/
rect (366,0) (439,32) http://www.channel1.com/mailus/

Then save the file as something like foobar.conf or barfoo.map. Here is a document at CERN specifying the format of an imagemap configuration file. Use it as a reference for making your *.conf or *.map file. Make sure you set the file permissions correctly for this file, just like you would for your web pages, using chmod.

Now that I have an imagemap configuration file, how do I use it?

In the Web page where the image is to appear, make an image anchor like this:

< A href="/IMG/username/clickable.map" > < IMG SRC="clickable.gif" ISMAP> </A >

Be sure to use "IMG" and not "img" or you will run into glitches. Replace "username" with your username. Replace "clickable.map" with the name of your image configuration file and "clickable.gif" with the name of the gif which you want to map URLs to ... You don't really need to know the details of why this works ... but it DOES and it lets you use our script with imagemaps without worrying about all the details.

As a final note, there are programs to automatically generate imagemap files, but we don't currently provide consulting support for any of them ... and it's really not too difficult to write your own.