Creating a Clickable Map

Contents

Introduction
Procedure
    Getting the Software
    Using MapEdit
Saving Your Clickable Map
    Server Map
    Client Side MAP
 

Introduction

 Clickable maps are a very easy and convenient way or orienting users on your home page. Just click on an image and go to the desired site!! Here is a short exercise on how to create your own clickable map. To see a cool example, check out Dr. Maidment's home page.

Procedure

Getting the Software

The first thing you need is to download the  software,  MapEdit. This will take a few minutes.
  Or get it from Dr. McKinney's Class Folder:
Go to the Windows Explorer from the Start/Programs

• Select Map Network Drive under Tools
• Double-click on Microsoft Windows Network to expand it (if not already)
• Double-click on CIVIL2 to expand it
• Double-click on LRC
• This will create a new drive.  Double-click on Class.
• Double-click on McKinney
• Double-click on Util

Using MapEdit

Before you can create a Clickable map, you must have a html document and a figure (your soon to be Clickable "map") incorporated in the document. When you open  the MapEdit software, you will be prompted to select an html or map document. Select your html document. Then a new window will appear listing all the images found in that document. Select the figure you want to make Clickable.

Once you have done that, you will see your image opened in MapEdit.

The next step is to select a portion of your image that you want linked. You can select area using a square, triangle or circle.  .   Click on your desired shape and then select an area by clicking and dragging on the mouse. Once you let go of clicking the mouse, a new window appears in which you will be asked the URL to be linked to. Then, click OK.

Repeat this procedure until you have linked what is necessary for your image. Finally, make sure to set the default link. This will insure that when the user clicks a part of the figure which is not linked to another page, they will remain on the original page. Simply write your html document's name as the default.

Saving Your Clickable Map

You can save your work in two forms: client-side or server-side. In a client-side image map, a map data is embedded in the host page. Clicks are processed by the Web browser without interaction with the server. In a standard server-side image map, clicks are processed by interaction with the Web server. (Source)
The best way to go is to use the client-side. However, below is the procedure for saving as both client-side and server-side.

Sever Map

Your last step is to save your work.  Select Save as under File. Select Sever Map (NCSA) as the format. Your file can then be saved as a .map extension. It is best to name your .map file the same as your html document or image.  This will help you when you have several Clickable maps.

Once you have finished creating the Clickable object, open your source html file. Here is the syntax to be used:

If you open you .map file in a text editor you will see the coordinates of your links:

Client Side Map

You can also save your file as "client" based .  To do so, simply click on client side map and name it the same as your original html document.

This will incorporate the .map file directly into your  .html.  Obviously, this is the most simple way to go. If you open your html source document, you will now see the following:
 

Note: you do not have to enter this code as you did for the "server" based method. This code will be automatically inputted into your .html document!!
 

Okay, you are done.  If you want more help check out UT's Web Publishing Page.
Many thanks to Carolyn Nobel for her help for the "client" based components of this exercise.