Homework 8

Image Map Exercise

Mt. Rushmore For this assignment you will create a web page with an image map ofthe current U.S. Supreme Court justices. When the user clicks on one of the individuals in the photo it should link to a web page on the Internet about that person (use Google or Wikipedia to find one). More details below:

Specifications

  1. Copy the supremeCourt2009.jpg file that you here on this web page. Do so by right-clicking on the image and save it to your computer.

  2. Set the window title of your web page to 2009 US Supreme Court.

  3. The headings, the supreme court image, and the caption beneath it (all described below) should be centered on the page.

  4. The largest size heading at the top should say U.S. Supreme Court Justices - 2009 and a smaller heading underneath that reads Image Map by NAME (where NAME is your own name).

  5. Immediately beneath the photo (with no line of blank space) should be the following caption that you will need to break up yourself so that it is not wider than the picture:

    Front row (L-R): Associate Justice Anthony M. Kennedy, Associate Justice John Paul Stevens, Chief Justice John G. Roberts, Associate Justice Antonin Scalia, and Associate Justice Clarence Thomas. Back Row (L-R), Associate Justice Samuel Alito Jr., Associate Justice Ruth Bader Ginsburg, Associate Justice Stephen Breyer, and Associate Justice Sonia Sotomayor.

  6. For each of the area links insert the attribute target="_blank", which will have the same effect that it did when we used it in html a-tags (to open the page in a separate window or tab).

  7. Use Microsoft Photo Editor to determine the coordinates that you need. Write down these coordinate values before getting started on your web page. I want you to use two or more of each type of shape for the 9 justices: circle, rectangle, and polygon.

  8. Test your webpage to see if the image maps link to the correct sites that you have chosen. I will be checking to see that your areas are cover the appropriate person without being too small or too large. One trick you can use to visually see each shape is to press the tab key several times to cycle through them.

  9. As with prior web page assignments, add a validation link at the bottom of the web page and make sure that it validates.