How to Create a Server-side Ismap

If you are running your web pages from your personal (home directory) on an IUPUI central web server, to create an ismap (click-able image), you need to have three files: the image file, the HTML file that refers to the image, and a map file (listing the destinations that your readers should be taken to when they click on the image). Follow the steps below and you should have an ismap ready and running in no time!

Create your graphic to appear exactly the way you want it to appear for your readers. You may find it easiest to use an application such as PhotoShop^® to create your image, or choose to use a "stock" photograph of the campus or one representing your discipline. Your ismap may be any image file that is viewable on the Web—and must include the extension (.gif or .jpg).
Create your HTML document. At the location in your HTML document where you want your ismap to appear, type:

<A HREF="http://www.iupui.edu/cgi- bin/imagemap/~userid/mapfile.map"><IMG SRC="image.gif" ALT="Map" HEIGHT=350 WIDTH=480 ismap></A>

Where "~userid" is replaced with your own Network ID, "mapfile.map" is replaced with the name you have chosen for your map file, and "image.gif" is the name you gave your image when you created and saved it. The line break is caused by the browser's display; you should type the command on a single line.
Place both your image and HTML file on a single floppy disk or in the same directory on your hard drive.
Start your web browser and open your HTML file. As you move your mouse over the image, look at the status bar at the bottom of your browser window. You will see the x,y coordinates (in the form of "134,65 263,127") of the mouse location, or you can open your image in a graphics package and determine the coordinates.
On a scrap piece of paper, record the x,y coordinates of the upper left and the lower right corner of each rectangular area that you want to be "click-able" in the image.
In your word processor (or any text editor) create a new file. When you save the new file (as a text only file) give it the name you specified in your HTML document (the one with a ".map" extension). This file contains the "directions" to where the reader will be taken when an area is clicked.
Use an ftp application to move the image, the HTML, and the map files to your www directory.

Creating a Map File

The map file identifies the location of HTML files that you want the reader to be taken to when the area between the identified coordinates is "clicked." These HTML files may be files of your own creation, or may be the URLs of destinations outside your own web space.

The first line in the map file is a default location. This specifies what you want to happen if a reader clicks outside a defined area. Many times, a designer simply wants the page to re-load, other times a designer may have created a special HTML file that gives the reader the message that a new area must be selected.

Here is a sample map file:

default http://www.iupui.edu/~webtrain/tutorials/tryagain.html
rect http://www.iupui.edu/~webtrain/tutorials/rocks.html 5,5 64,141
rect http://www.iupui.edu/~webtrain/tutorials/waterfall.html 91,5 127,196
rect http://www.iupui.edu/~webtrain/tutorials/tree.html 125,5 189,169
rect http://www.iupui.edu/~webtrain/tutorials/rainbow.html 47,248 131,255
rect http://www.iupui.edu/~webtrain/tutorials/rocks.html 6,258 40,293
rect http://www.iupui.edu/~webtrain/tutorials/grass.html 88,274 126,297
rect http://www.iupui.edu/~webtrain/tutorials/grass.html 123,265 192,300
rect http://www.iupui.edu/~webtrain/tutorials/rocks.html 151,239 188,249

Return to: Beyond HTML Basics, Ismaps

Return Home