• Home
  • About
• Cabrillo
  • DM56
    • Syllabus
    • Schedule
    • Exercises
      • Exercise 1
      • Exercise 2
        • Feedback form
      • Exercise 3
        • Feedback form
      • Exercise 4
        • Feedback form
      • Exercise 5
        • Feedback form
      • Final project
        • Feedback form
    • Extra credit
    • Grades
    • Student sites
  • DM60
    • Syllabus
    • Schedule
    • Exercises
      • Exercise 1
      • Exercise 2
        • Feedback form
      • Exercise 3
        • Feedback form
      • Exercise 4
        • Feedback form
      • Exercise 5
        • Feedback form
      • Exercise 6
        • Feedback form
      • Exercise 7
        • Feedback form
      • Exercise 8
        • Feedback form
      • Exercise 9
        • Feedback form
      • Exercise 10
        • Feedback form
      • Final project
        • Feedback form
    • Extra credit
    • Grades
    • Student sites
• Resources
  • Tutorials
  • Links
• Forum
  • Forum tips
• Sitemap
• Contact

How to Create Imagemaps With MapEdit

MapEdit is imagemapping shareware for Windows, Macintosh, and Unix. You can download a copy that will be fully functional for 30 days from:
http://www.boutell.com/mapedit/download.html

See the MapEdit FAQ for help with making imagemaps (or for help with downloading and installing).

These instructions are written for MapEdit 2.31.

1) Start with an HTML page that has an image on it. In other words, you must have a page that at least has a
<img src="images/somegraphic.gif">
tag on it. (Of course you will also need to have the image file.)

Keep things simple: start with this page and the image file on your local disk, not on the server.

2) Launch MapEdit.

3) From MapEdit, under the "File" menu, choose "Open...". Navigate to your HTML file and click on the "Choose" button. (Note that you are opening an HTML file, not a GIF or JPEG image.)

4) MapEdit will show you a list of the images on the page. Select the image that you want to make into an image map, and click "OK".

5) Now, using the three drawing tools (rectangle, circle, polygon), create your hotspots in MapEdit.

Try using the rectangle tool. From the tool palette, click on the green square to select this tool. Click the mouse somewhere on your image and let the mouse button up again without moving the mouse. Then drag the mouse to another part of the image and note that as you drag it you see a line forming a rectangular shape. When the rectangle is where you want, click the mouse again. An "Enter Link URL" box should then pop up, waiting for you to type the "URL for this hotspot". Type in the name of the HTML file (or the path to the file, if this file won't be in the same folder as the imagemap page) that you want this hotspot to link to. Ignore the other fields. Click "OK". (If you don't want to save this hotspot, click "Delete".)

If you click on the blue circle in the tool palette, you can try the circle tool. It works the same way the rectangle tool works.

Try using the polygon tool. From the tool palette, click on the red triangle to select this tool. Click the mouse somewhere on your image and let the mouse button up again without moving the mouse. Then drag the mouse to another part of the image and note that as you drag it you see a line forming. Click the mouse at different points on the image to form an irregular shape. To close this polygon, click again on the first point. (On a Mac, a command-click will automatically close the polygon. On Windows, right-click to automatically close the polygon.)

6) After you create your hotspots, save the document. Under the "File" menu, choose "Save". You are just re-saving the HTML document that you first opened, so you save it as an HTML document, not as a GIF or JPEG! You are not editing your image in any way, you are editing and saving the HTML page that the image is on.

7) Now open this page in a browser and test the hotspots.

8) Upload the page and the image file (and any files that you linked to, if necessary) to your folder on the server. (Put the image in your images folder.)