Building a Web Site Part II
Making Image Maps
Why Image Maps?  Suppose you were to create a website with information about each of the states near Kansas City.  The website was to have a main "front" page with links to individual pages about each of the states.  It would be possible to list the states by name in a table.  But a system which would provide links in a more "intuitive" manner for the user would be to display an actual map of the central United States and allow us to click on a state to navigate to the appropriate page.   The image at right is a sample of such links to more information - to find out how this system works, continue reading and looking at examples in this lesson.  

centralstates.JPG (28006 bytes)
Here are the steps:
  • locate/select a digital image to be the "map" (should be in "gif" or "jpg" format).
  • open the images folder (in folder view) and "import" the image into your web site.
  • open your web page and "insert" the image at the desired location.
  • "select" the image (click on it) so that the graphics toolbar appears at the bottom of the screen:
  • choose either the "rectangle", "oval", or "polygonal" hotspot tool on the graphic palette.
  • "draw" the region to be made into a hotspot on the selected image.
  • fill in the information regarding the new link when the window appears ready for that information to be typed.

Note that by selecting the appropriate hotspot tool, the region which becomes a clickable button can be controlled fairly nicely!  Try out clicking on a state above as a link to actual information files on the Internet about that state.  Each tool looks like a pencil when selected but they work with a few variations.

Click the rectangle tool or the oval tool and click and drag from one corner to the opposite corner and a rectangle or an oval will be created.  For the polygon tool, click at each vertex around the perimeter of the polygon.  When the tool is clicked on the beginning vertex, the software recognizes that the region is completed and the dialog box requesting a link address will automatically appear.

A creative idea:  Some folks at the NASA web site suggested a simple and creative way to enhance navigation of a web site using Webtoons.  They explain how to storyboard a series of options or instructions, photograph people talking (as if they were explaining the content of the storyboard), using a graphics program to add "balloon" captions, and finally converting to image maps.  It may be a great way to involve kids in the design of navigation for a class project site.

Assignment for Next Time:  Continue work on your web site.  Add an image to some portion of the web site and make an image map to other pages in your site or to other sites on the Internet.  Make sure that you have submitted your e-mail address to the instructor and that you have been successful in publishing your page!  Check with the instructor for assistance with any of these tasks.  Continue with "Forms" before doing the third quiz.

This site copyrighted (2005) by Dr. Blake West - Please credit when linking to the site!
Kansas NEA - 715 SW 10th Ave.  Topeka, KS  66612.