After over a decade of service to the web community, I have made the decision that Web by Design has served its purpose and lived a fruitful life. It is time to shutter the doors and move on. However, due to the fact that so many continue to reference this tutorial, I will keep it available for the near future.
Thank you for your support over the years. It has been a pleasure.
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:
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
- 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
- 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
Here is a sample map file:
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