Home

This site shows an example of using a map image for navigating to other content. Clicking on the marked areas of the map (borrowed from Charles Jervis' Pandapas Pond site) will take you other pages.

Note that we will also eventually have the ability to navigate based on maps generated from GIS data. Even once this is working, however, there will still be instances where navigation based on images is useful.

Data Collection Sites

map sketch

View large map

To create a site like this:

Find the image that you want to use for your map
- The image should be in a "web-friendly" format: JPG or GIF
- If the image is really large, you might want to scale it before you bring it into Teacher Bridge. In this case, the full scanned map was about 250 Kb. Keeping the file this size preserves alot of detail, but will also be very slow to download and to work with. I used the Mac shareware utility "Graphic Converter" (http://lemkesoft.com/gcdownload_us.html) to scale it down to about a 26Kb file. Eventually we should have the capability to do this kind of basic image manipulation within our software.
Make a new site (if you aren't adding the map to an existing site)
1. Log into Teacher Bridge by clicking the "Full Editor" link at the bottom of one of the web pages (if you don't already have the Full Editor running)
2. In the "Folders" panel of the editor, find and select the place where you want the new site to appear
3. Choose "Add to..." from the "File" menu
4. Under "Sites", choose "Standard Site"
5. When the new "Untitled Site" folder appears, select it, choose "Rename" from the "File menu", and enter a name for the new site.
6. For this example site, I also made a few other modifications to the site structure:
  1. I made a new web page named "header" and added the "Pandapas Pond Map" and "Back to Examples page" links
  2. I opened the "Web site template" object in the site and:
    1. Set the "Prefix for page titles" to "Images Example: "
    2. On the "Sidebars" tab, set the left sidebar to "(None)"
    3. On the "Header/Footer" tab, set the "Header content" to "header"
Bring the image file into Teacher Bridge by dragging it from your local disk into the "Contents" panel of the Full Editor. In this example site, the image file was named "pandapas-map-small.jpg"
Add a drawing object
1. Go to "Add to..." under the "File" menu
2. Select "Objects", then "Blank Drawing", then click "Create"
3. Select the new "Untitled Drawing" when it appears, then choose "Rename" from the "File" menu and give the drawing a new name (in this example I called it "map sketch")
Add the image to the drawing
1. If the drawing is not open, open it by double-clicking it in the "Contents" panel of the Full editor.
2. Choose the Image tool from the toolbar (it has a picture of a picture of a flower)
3. Click on the drawing area at the place where you want the image. (In this particular case it doesn't really matter where you click, since the drawing surface is blank, and the drawing will be "trimmed" to include only the parts that actually contain something when this is presented on the web page.)
4. In the dialog that appears, select "From this object:" and then pick the map image from the popup. In this example I picked "pandapas-map-small.jpg".
5. Click "OK". The image should appear on the drawing surface.
  - At this point you can move and resize the image (hold down shift while dragging a corner to keep the image from stretching).
Add shapes to the map for each page or site that you want to be able to navigate to:
1. Add a Web Page, site, or other object for a place that is to go on the map. In this example, I create web pages named "Poverty Creek Site" and "Upper Dam Site".
2. Add whatever text, lines, and shapes to the drawing that you want. In this example I:
  1. Added an ellipse around the general location of each data collection site
  2. Selected the elipse and choose "None" from "Fill Color" in the "Attributes" menu.
  3. Added a text object with the name of each site
  4. Used the link tool to make a link between the name and ellipse for each site. (A link is just a line between two other objects that stays connected as those objects are moved.)
  5. Selected the links and choose "at End" from "Arrow" under the "Attributes" menu.
3. Associate each clickable object with a web page or other object in the web site
  1. Select the URL tool from the toolbar in the drawing
  2. Select on the object that you want to make clickable. This can be any object on the drawing: shapes, lines, images, text, etc...
  3. When you click on an object in the drawing, a dialog will appear in which you may either enter a URL to link to or select another object in the site. In this example, I associated the "Upper Dam Site" text and ellipse with the "Upper Dam Site" page and the "Poverty Creek Site" text and ellipse with the "Poverty Creek Site" page.
Add the clickable image to a web page
1. Open the web page that you want the clickable map to appear on. In this example this was the "Home" page for this site.
2. Enter the name of the map at the location that you want it within the page text, surrounded by backslashes. In this example, this looked like "\map sketch\".
3. If you want the map to be centered, surround it with HTML <CENTER> tags. On this page this looks like <CENTER>\map sketch\</CENTER>

The clickable objects on a drawing will generally stay intact if you rename the pages (or other objects) that they refer to, though for some types of changes you may still have to reset the links. To do this, simply re-open the drawing, choose the URL tool, and click on the object whose linked page has changed.

/public/support/FullEditorTutorial/Image Maps/Home	Login \| Web Editor \| Full Editor
Last modified 3/29/05 6:32 PM by dunlapd (history) Site contents