Guide to Clickable Image Mapping

• TeacherBridge for creating and hosting the websites.
• UsaPhotoMaps for downloading maps and plotting longitude and latitude waypoints supporting GPS.
• MapEdit for adding HTML image maps (free to education institutes).
• PhotoPlus 5.5 for editing photo images AND adding HTML image maps. (Temp registration for testing, use: dunlapd@vt.edu Unlock Code: CHaDiTxk)

Step 1: Create TeacherBridge Web page for each monitoring location or station.

• Go to a web page in the TeacherBridge folder / site where you will create the web page. If you already have a web page for the link, proceed to Step 2.
• In the lower left corner of the web page, click on the link "Site contents".
• At the bottom of that web page, choose "Web Page" from the "Objects" menu, enter a title for the site / page, then click the "Add" button to create the web page. (This usually requires password for user account).
  • Choose "Upload" to add pics or files to link or embed in your web pages (e.g. JPG, GIF, Word Doc, HTML, Power Point, etc.).
  • Placing stars around the name of the object (e.g. *Resources*) will create hypertext link to the object.
• Click on "Web Editor" to edit a web page (either in Site Contents or on the page you want to edit).
• Enter text and/or HTML then click "Save" when finished.
• Note the URL for each web page that you will want to link.

Step 2: Get a digital aerial photo or topo of your and plot sites with waypoints using

• Download and open UsaPhotoMaps.
  • Open new map by choosing File>New Map File
  • Input your coordinates (if needed, see GPS Coordinates Database for Virginia) and click "OK".
  • You can display aerial photo or topo map by choosing View>Map Type>Photo (or topo) or by hitting "p" or "t" keys.
  • Choose File>Download Map Data>Fill Screen (or hit "f" key) to download photo or topo map.
  • Zoom in / out (+ or - keys) and hit Fill ("f" key) to frame the region you want.
• Add waypoints for each monitoring spot
  • Click on the coordinate you want to add (cursor location is shown in top border).
  • Input "Description" name, and "(GPS) Name". For "(GPS) Name", you might want to enter the corresponding GPS coordinate (e.g. N 37.231405, W 80.448222).
  • Right click on the map to open a window with a list of waypoints added. By checking the box at the top of the list, you can choose to display the name OR description of the waypoints on the image.
• Save the map image.
  • Choose File>Copy to 'Screen01.jpg'
  • The image file will be named 'Screen01.jpg' (or 'Screen02.jpg' if 'Screen01.jpg' already exists), and it will be saved in the UsaPhotoMaps program folder (usually "C:/Program Files/USAPhotoMaps"). It's often helpful to create a shortcut to that folder on your computer's desktop to easily access the saved image.
• Edit the image (optional)
  • At this point, you can use an image editing program to resize the image, add annotation, and etc.
  • Be sure to save the image. We recommend saving it in JPEG (.jpg) format.
  • There are a number of very good and totally free photo editing programs (e.g. PhotoPlus and VicMan's Photo Editor).

Step 3: Create and upload a clickable image map and image.

• Download and open MapEdit.
• Click the "Open An Image" button (from the "What Do You Want To Do?" dialog).
• Navigate to the UsaPhotoMaps folder, and choose the File>Copy to 'Screen01.jpg' file to open.
• Create clickable regions around each spot to link to corresponding web page.
  • Choose the "Add Circles" button from the top menu.
  • From the center of the spots, click and drag a circle around the spot. You should make the circle large enough to surround the spot with significant area so that it is easy to click on the region, but not so big that the circles overlap. It should be clear that the region corresponds with the spot that is marked on the image.
  • When the mouse button is released, a dialog window appears. Enter the full URL for the web page to link at this spot in the top blank (e.g. http://teacherbridge.org/projects/NOAA+Project/Resources).
  • Repeat for each spot and webpage to link.
• Save the image map as HTML file
  • Choose "Save HTML Document" button (or from File menu).
  • Enter a short and appropriate file name (e.g. "imagemap").
  • Save file. It might be helpful to save to your desktop or the UsaPhotoMaps folder.

• Download and open PhotoPlus 5.5.
• Click the "Open" button or File>Open
• Navigate to the UsaPhotoMaps folder, and choose the File>Copy to 'Screen01.jpg' file to open.
• Create clickable regions around each spot to link to corresponding web page.
  • Choose the "Image Map Circles" button from the "Image Map Tools" button (bottom left button).
  • Click and drag a circle around the spot. You should make the circle large enough to surround the spot with significant area so that it is easy to click on the region, but not so big that the circles overlap. It should be clear that the region corresponds with the spot that is marked on the image.
  • Choose the "Image Map Selection" button from the "Image Map Tools" button.
  • Move the circle as desired. Right click and choose "Properties" from the menu. Enter the full URL for the web page to link at this spot in the top blank (e.g. http://teacherbridge.org/projects/NOAA+Project/Resources). And enter "Text" to appear on mouse-over.
  • Repeat for each spot and webpage to link.
• Save the image map as HTML file
  • Choose File>Export.
  • Enter a short and appropriate file name (e.g. "imagemap")
  • Select the "Create HTML for Image Maps" checkbox.
  • Choose a "Save in" location (e.g. Desktop) at top.
  • Click "Save"
  • 2 files will be saved (image and HTML file)

• Upload the HTML file (image map) AND corresponding image (e.g. 'screen01.jpg').
  • Go to the Site contents in the TeacherBridge folder with your website by going to a page in your site and clicking on "Site contents" link in lower left corner.
    • At the bottom of the Site contents page, choose "Upload" new file. In the case of image maps, it's best to keep the original names of the files.
    • Browse to the HTML file to upload.
    • Repeat upload for the image file (e.g. 'screen01.jpg').
• Embed or link to the image map HTML file uploaded.
  • TeacherBridge allows web pages (including HTML files) to be "embedded" in other web pages.
    • Embed the file by placing backslashes around the object name (e.g. \imagemap\).
    • Now you can add text explaining image map and any other relevant information.