Creating an Imagemap at NetRunner

Important Note! If your Imagemap doesn't work and you have the word "cgi-bin" in the URL, you need to re-read this. Things have changed... We do things a bit differently then many other providers.

Imagemaps or "Clickable Images" are very easy to do. You basically need only do three things:

  • Select an image with distinct zones which can be made clickable
  • Make a "mapfile"
  • Properly call the Imagemap script and mapfile in your HTML
  • Assuming that you have a proper image selected, lets begin the mapfile. This file lists zones on the image in the form of coordinates and corresponding URLs. Here is the one we used to use for the NetRunner Home Page.

    #$TITLE:imap.map#$AUTHOR:Sabercat!
    #$DATE:Fri Jul 21 20:18:53 1995
    #$GIF:home.image.gif
    #$FORMAT:NSCA
    default http://www.netrunner.net
    rect http://www.netrunner.net/launch.html 41,28 138,101
    rect http://www.netrunner.net/inet.html 162,6 254,77
    rect http://www.netrunner.net/techtip.html 284,18 361,100
    rect http://www.netrunner.net/bulletin.html 320,112 422,178
    rect http://www.netrunner.net/software.html 281,191 384,260
    rect http://www.netrunner.net/users.html 151,215 261,275
    rect http://www.netrunner.net/commerce.html 15,183 137,259
    rect http://www.netrunner.net/book.html 2,107 107,175
    poly http://www.netrunner.net/about.html 160,91 128,132

    Such a file may look like Greek, but I assure you it's a simple matter to create. Get Mapedit if you run 16 bit windows. Mapthis! If you run Win95. Our Mac users can use WebMap.

    Three things to remember when you are doing your map file.

    1. Make sure that you save it in the NCSA Format
    2. It must have the .map extension
    3. Make sure that you list a valid default URL!!!!
    4. List the complete URL path to each called document
    5. Name the map something like imap.map and put it in the same directory as the image

    Calling an Imagemap is easy:

    <A  href="homepage.map"><IMG src="home.image.gif"
    alt="Image Map: (DO NOT USE THIS LINK WITH LYNX)" ISMAP
    BORDER="0">

    This is how the NetRunner Home Page Imagemap is called. The bold areas are parts you'll need to replace to make the map work in your directory. Easy!

    It doesn't work!!!!!!!!!!

    If your Imagemap doesn't work you've made a mistake. :o) Here's a few places to start investigating:

    1. Did you call a default URL?
    2. Did you save the mapfile in NCSA format? CERN doesn't work!
    3. Did you upload the mapfile in ASCII or BINARY format? It's text, use ASCII!!!
    4. Make sure ISMAP appears in the URL and the paths are correct.
    5. Is the NetRunner Imagemap functioning? Under rare conditions of server overload Imagemaps don't work.

    You Are now the proud Owner of an Imagemap!

    Congratulations.

    Copyright 1997-2018 NetRunner Inc. All Rights Reserved.